CSS / HTML代码：

Question

对不起那些非常简单的问题，但是我试图沿着这些线向左边和右边浮动一个预定宽度

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

虽然这种“大部分”都有效但似乎弄乱了它下面页面上的其他元素。

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

7 个答案:

答案 0 :(得分：46)

答案 1 :(得分：11)

答案 2 :(得分：8)

答案 3 :(得分：3)

答案 4 :(得分：3)

答案 5 :(得分：0)

答案 6 :(得分：0)

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>

<强> Working Demo

Answer 3

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

Demo

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

Answer 4

通过同时float到left，也可以有一个解决方案。

试试这个：

Working Demo

P.S。这只是对Ankit的答案的改进

Answer 5

看看这个小提琴：

http://jsfiddle.net/G6N5T/1574/

CSS / HTML代码：

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 33%;
background:lightblue;
    height: 400px;
}

.fcenter{
    float:left;
    width: 33%;
    background:lightgreen;
    height:400px;
    margin-left:0.25%;
}

.fright {
float: right;
    background:pink;
    height: 400px;
    width: 33.5%;
    
}

<div class="wrap">
    <!--Updated on 10/8/2016; fixed center alignment percentage-->
    <div class="fleft">Left</div>
    <div class="fcenter">Center</div>
    <div class="fright">Right</div>
</div>

这会将CSS float属性用于页面上div的左对齐，右对齐和居中对齐。

Answer 6

或者，您也可以使用称为 linear-gradient（）函数的特殊功能，将浏览器屏幕分为两个相等的部分。查看以下代码段：

body
{
  background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}

在这里， linear-gradient（）函数接受三个参数

90deg用于屏幕的垂直划分。（类似地，您可以使用180deg用于屏幕的水平划分）
lightblue颜色用于表示屏幕的左半部分。
skyblue颜色已用于表示拆分屏幕的右半部分。在这里，50%已用于浏览器屏幕的等于划分。如果您不希望屏幕的等于划分，则可以使用任何其他值。希望这可以帮助。 :) 祝您编码愉快！

Answer 7

以下是灵活框方法：

CSS

 .parent {
  display:flex;
  height:100vh;
  }
  .child{
    flex-grow:1;
  }
  .left{
    background:#ddd;
  }
  .center{
    background:#666;
  }

  .right{
    background:#999;
  }

HTML

<div class="parent">
    <div class="child left">Left</div>
    <div class="child center">Center</div>
    <div class="child right">Right</div>
</div>

您可以在js fiddle.

中尝试相同的操作

使用CSS垂直拆分页面

7 个答案:

CSS / HTML代码 ：

CSS / HTML代码：