右浮动div ...对齐到底部？答案

【问题标题】：right floated div...align to bottom?右浮动div ...对齐到底部？
【发布时间】：2013-10-03 02:46:16
【问题描述】：

我有这样的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;
}

我尝试更改为绝对定位和相对定位，但没有帮助...

这是徽标正确显示在左侧但右侧选项卡浮动的样子...我想让它们与底部对齐。

【问题讨论】：

请提供一个有效的 jsfiddle 以及影响图像和标签的所有 CSS
@Oriol 这里是 jsfiddle jsfiddle.net/86Pr2
查看这个更新的小提琴：jsfiddle.net/86Pr2/1
注意标签位于顶部，我想将它们移动到 div 内容之前的底部边缘。
@ImranOmer 这不对，您的标签位于页面底部。我希望标签显示在右上角的灰色部分之前。

标签： html css

【解决方案1】：

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

我添加了一个带有“clear”类的 div 和以下 CSS：（我向所有这些都添加了 !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>

【讨论】：

哇！很高兴有帮助。 :)

【解决方案2】：

并不是说@codedude 没有创建可以工作的东西，而是你永远不想在你的 CSS 中使用 !important 标记。

这是我的工作：http://jsfiddle.net/dancameron/86Pr2/7/

它也不需要任何额外的标记（一个空的 div 来清除！）并清理类名以使其更具语义。

HTML：

 <div class="content-wrapper clear-fix">
        <div class="float-left">
            <img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
        </div>
        <div class="nav-wrap">
            <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 id="body">
        <section class="content-wrapper main-content clear-fix">
            hi
        </section>
    </div>

CSS：

.content-wrapper {
    margin: 0 auto;
    max-width: 100%;
    position: relative;
}
.nav-wrap nav {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

【讨论】：