提问人：Maxim Gershkovich 提问时间：7/26/2012 最后编辑：Mr. AlienMaxim Gershkovich 更新时间：4/25/2021 访问量：172350
使用 CSS 垂直拆分页面
Split page vertically using CSS
问：
对不起，伙计们的问题非常简单，但我试图沿着这些行用预定义的宽度向左浮动一个 div，向右浮动一个 div
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
尽管这“大部分”有效，但它似乎弄乱了其下方页面上的其他元素。
那么，为什么使用 CSS 将 HTML 页面垂直拆分为两部分而不影响页面上的其他元素的正确原因是什么？
答：
15赞
bugwheels94
7/26/2012
#1
只需添加 overflow：auto;到父 div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
评论
2赞
gcb
3/23/2013
你只是把两边都放上去。height: 400px;
0赞
Cole Henrich
4/9/2021
谢谢你的工作例子！出于某种原因，你的有效，而接受的没有。我想知道为什么......
51赞
Ashwini Agarwal
7/26/2012
#2
你可以使用..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
现在，低于此值的元素将不受影响。
评论
4赞
Tieson T.
7/26/2012
虽然这可行，但添加唯一功能是“清除内容”的元素被认为是不好的做法。
8赞
Attila Fulop
2/6/2013
那么，在这些情况下，最佳做法是什么？（我一直在想如何避免“clearfix”divs）
0赞
gcb
3/23/2013
如果我需要在它们之间划一条线怎么办？不能使用 left|right 边框，因为我不知道哪个会一直更大......
10赞
Mr. Alien
7/26/2012
#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%;
}
3赞
Ankur
12/22/2012
#4
也可以通过同时拥有 .floatleft
试试这个：
P.S. 这只是对 Ankit 的 Answer 的改进
评论
0赞
Jain
3/15/2020
制作了很棒的演示！让事情对我有用。谢谢
3赞
Stardust
8/20/2015
#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 属性对页面上 s 的左对齐、右对齐和居中对齐。floatdiv
评论
0赞
Stardust
8/20/2015
此代码片段只是此 JSFiddle 的修改（单击我！
0赞
Raunak Mitra
1/1/2019
#6
或者，您也可以使用称为 linear-gradient（） 函数的特殊函数将浏览器屏幕分成相等的两半。 查看以下代码片段：
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
在这里，linear-gradient（） 函数接受三个参数
90deg用于屏幕的垂直分割。（同样，您可以用于屏幕的水平分割）180deglightblue颜色用于表示屏幕的左半部分。skyblue颜色已用于表示分屏的右半部分。 这里，已被用于平均划分浏览器屏幕。如果您不希望屏幕的划分相等，则可以使用任何其他值。 希望这会有所帮助。:) 祝您编码愉快！50%
0赞
Vikas Gupta
2/11/2020
#7
以下是 flex-box 方法：
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 中尝试相同的方法。
评论