div适合浮动div的高度?

时间:2013-12-06 04:51:03

标签: css html width

好吧,当我需要设置两个div(一个浮动和固定宽度)和另一个带有浮动div宽度大小的div的div时,它永远不会工作。

enter image description here

我试过清楚:两者,以及其他一些工作。没有什么是成功的。有没有更好的方法来做到这一点?

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

3 个答案:

答案 0 :(得分:3)

尝试:

.usercpwrap{overflow:hidden;}

DEMO here.

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

DEMO here.

答案 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>

工作正常。