我有这样的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;
}
我尝试改为绝对和相对定位,但它没有帮助......
以下是左侧显示正确徽标但右侧浮动标签的样子......我想将这些标签对齐到底部。
答案 0 :(得分:1)
我添加了一个带有“clear”类和以下CSS的div :(我添加了!对所有这些都很重要因为我不想查看所有代码。)
.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>
答案 1 :(得分:0)
并非@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;
}