CSS 对象在 div 中的定位

Question

我有一个div，里面有几个对象。 我的左右两侧都有物品。 左侧似乎很好。 右侧我有两个对象需要与右上角对齐。 当我得到mybelmont图标时.png离它太近开始垂直拉伸菜单。 关于如何解决这个问题的任何想法？

<div id="outer">
    <div id="inner">
        <img src="images/belmont-logo.png" align="left">
        <img src="images/dot-divider.png" align="left">
        <img src="images/prospective-students.png" align="left">
        <div class="quicklinks" align="right">
            <div style="margin-left:500px; float:left;"><img src="images/mybelmont-icon.png"></div>
            <ul class="menu">
                <li class="menu-item">
                    <b>Quick Links >></b>
                    <ul class="sub-menu clearfix">
                        <li class="menu-item">
                            <b><u>Heading 1</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 2</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 3</u></b>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Academics</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Admissions</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Financial Aid</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> President's Message</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Why Belmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Board of Trustees</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Giving</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> MyBelmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Apply Now</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Majors & Programs</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Facebook</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Twitter</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>      
    </div>
</div>

.CSS：

body{
    background-color: #ccc;
    height:100%;
    margin:0px;
}
.clearfix:before, .clearfix:after {
    content: " "; 
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.quicklinks a{
    color: #ffffff;
    text-decoration:none;
}
.quicklinks a:visted{
    color: #ffffff;
    text-decoration:none;
}
.quicklinks a:hover{
    color: #ffffff;
    text-decoration:none;
}
.quicklinks a:active{
    color: #ffffff;
    text-decoration:none;
}
.menu {
    background: #f36f21;
    margin: 0;
    list-style-type: none;
    padding: 5px 15px 5px 15px;
    position: relative;
    width: 110px;
}
.menu .menu-item:hover .sub-menu {
    display: block;
}
.sub-menu {
    background: #f36f21;
    display: none;
    margin: 0; 
    padding: 10px;
    position: absolute;
    right: 0;
    width: 400px;
    text-align: left;
}
.sub-menu .menu-item {
    display: inline;
    float: left;
    padding: 0 10px 0 10px;
    width: 100px;
}
.quicklinks{
    margin: 0;
    padding: 0;
}   
#outer{
    background-color:#003366;
    height:120px;
}
#orangebar{
    background-color:#f36f21;
    height:5px;
}
#inner{
    width:1024px;
    height:auto;
    color: #ffffff;
    background-color:#003366; 
    margin:0px auto 0 auto; 
}

这是一个实时预览。

我想通了。 您可以通过将对象分配给 float： right 来完成任务。 效果很好。 谢谢大家的看。

<div id="outer">
    <div id="inner">
        <img src="images/belmont-logo.png" align="left">
        <img src="images/dot-divider.png" align="left">
        <img src="images/prospective-students.png" align="left">
        <div class="quicklinks">
            <ul class="menu">
                <li class="menu-item">
                    <b>Quick Links >></b>
                    <ul class="sub-menu clearfix">
                        <li class="menu-item">
                            <b><u>Heading 1</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 2</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 3</u></b>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Academics</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Admissions</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Financial Aid</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> President's Message</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Why Belmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Board of Trustees</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Giving</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> MyBelmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Apply Now</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Majors & Programs</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Facebook</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Twitter</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <img style="float: right;" src="images/mybelmont-icon.png">     
    </div>
</div>
.quicklinks{
    float: right;
    color: #ffffff;
    text-decoration:none;
}
.quicklinks a{
    color: #ffffff;
    text-decoration:none;
    float: right;
}
.quicklinks a:visted{
    color: #ffffff;
    text-decoration:none;
    float: right;
}
.quicklinks a:hover{
    color: #ffffff;
    text-decoration:none;
    float: right;
}
.quicklinks a:active{
    color: #ffffff;
    text-decoration:none;
    float: right;
}

Answer 1

简单的答案应该只是正确浮动所需的元素

.element{
    float: right;
}