右浮动div ...与底部对齐？

oJM86o 发表于 Dev

oJM86o

我有这样的html：

<div class="content-wrapper">
            <div class="float-left">
                <img alt="Track System" src="Images/myimage.png" />
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li class="tab"><a runat="server" href="~/">Home</a></li>
                        <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                        <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                        <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                    </ul>
                </nav>
            </div>
        </div>

第一个div（左浮动）只是一个具有一定长度的图像...第二个div（右浮动）是我想在底部对齐的标签。现在他们太高了...

CSS类只是：

.float-left{
float:left;
}

.float-right{
float:right;
}

我尝试更改为绝对定位和相对定位，但这没有帮助... 在此处输入图片说明

这是徽标正确显示在左侧，但右侧的选项卡浮动的外观……我想将其对齐到底部。

Codedude

这是你想要的吗？http://jsfiddle.net/86Pr2/4/

我添加了一个带有“ clear”类和以下CSS的div ：（我对所有它们都添加了！important，因为我不想遍历所有代码。）

.float-right {
position:absolute !important;
bottom:0 !important;
right:0 !important;
}
.content-wrapper {
   position:Relative !important;
}
.clear {
    clear:both !important;
}

以及更改后的HTML：

<div class="content-wrapper">
        <div class="float-left">
            <img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
        </div>
        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li class="tab"><a runat="server" href="~/">Home</a></li>
                    <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                    <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                    <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                </ul>
            </nav>
        </div>    
<div class="clear"><!--This makes the wrapper have a height--></div>

    </div>
    <div id="body">
    <section class="content-wrapper main-content clear-fix">
        hi
        </section>
    </div>