使用CSS垂直拆分页面

Question

对于这个非常简单的问题我们很抱歉,但是我试图沿着这些线向左边和右边浮动一个预定宽度的div

<div style="width: 100%;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

虽然这"大部分"都有效,但它似乎搞乱了它下面页面上的其他元素.

那么,使用CSS将HTML页面垂直分成两部分而不影响页面上的其他元素的正确原因是什么？

Answer 1

您可以使用..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

现在元素下面的元素不会受到影响.

Answer 2

只需添加overflow:auto; 到父div

<div style="width: 100%;overflow:auto;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

工作演示

Answer 3

我猜你页面上的元素会因为你没有清除你的花车而弄乱,看看这个

演示

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;"></div>
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}