好吧,当我需要设置两个div(一个浮动和固定宽度)和另一个带有浮动div宽度大小的div的div时,它永远不会工作。
我试过清楚:两者,以及其他一些工作。没有什么是成功的。有没有更好的方法来做到这一点?
HTML:
<div class="usercpwrap">
<ul class="usercptabs">
<li>Account</li>
<li>Friends</li>
<li>Messaging</li>
<li>Reputation</li>
</ul>
<div class="usercpcont">
Ajax load page content from: /usercp/{page}.php
goes here.
</div>
</div>
CSS:
.usercptabs{
float: left;
position: relative;
width: 225px;
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
border-right: 1px solid blue;
}
.usercptabs li{
height: 40px;
line-height: 40px;
padding-left: 10px;
border-bottom: 1px solid blue;
}
.usercptabs li:last-child{
border-bottom: none;
}
.usercpcont{
margin-left: 225px;
}
答案 0 :(得分:3)
尝试:
.usercpwrap{overflow:hidden;}
OR:
清除浮动。
<div class="usercpwrap">
<ul class="usercptabs">
<li>Account</li>
<li>Friends</li>
<li>Messaging</li>
<li>Reputation</li>
</ul>
<div class="usercpcont">Ajax load page content from: /usercp/{page}.php goes here.</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
答案 1 :(得分:1)
只会使保证金加倍,因为它会覆盖浮动div的确切长度
.usercpcont{
margin-left: 550px;
}
答案 2 :(得分:0)
明确:两者;在usercpcont DIV之后
<div class="usercpwrap">
<ul class="usercptabs">
<li>Account</li>
<li>Friends</li>
<li>Messaging</li>
<li>Reputation</li>
</ul>
<div class="usercpcont"> Ajax load page content from: /usercp/{page}.php
goes here. </div>
<div style="clear:both;"></div>
</div>
工作正常。