html - div 中的 CSS 对象定位

Question

我有一个包含一些对象的 div。我的左右两边都有元素。左边好像没问题。右侧我有两个对象需要对齐到右上角。当我离 mybelmont-icon.png 太近时，它开始垂直拉伸(stretch)菜单。关于如何解决此问题的任何想法？

<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; 
}

这里是 a live preview .

我想通了。您可以通过将对象分配给 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;
}