Html 使用 CSS 垂直拆分页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11662536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Split page vertically using CSS
提问by Maxim Gershkovich
Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines
对不起，这个非常简单的问题，但我试图沿着这些线用预定义的宽度向左和向右浮动一个 div
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Although this 'mostly' works it seems to mess up the other elements on the page below it.
尽管这“主要”有效，但它似乎弄乱了它下方页面上的其他元素。
So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?
那么，为什么使用 CSS 将 HTML 页面垂直拆分为两部分而不影响页面上的其他元素的正确做法是什么？
回答by Ashwini Agarwal
you can use..
您可以使用..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
now element below this will not be affected.
现在下面的元素不会受到影响。
回答by bugwheels94
Just add overflow:auto; to parent div
只需添加溢出：自动；到父div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
回答by Mr. Alien
I guess your elements on the page messes up because you don't clear out your floats, check this out
我猜你页面上的元素搞砸了，因为你没有清除你的浮动，看看这个
HTML
HTML
<div class="wrap">
<div class="floatleft"></div>
<div class="floatright"></div>
<div style="clear: both;"></div>
</div>
CSS
CSS
.wrap {
width: 100%;
}
.floatleft {
float:left;
width: 80%;
background-color: #ff0000;
height: 400px;
}
.floatright {
float: right;
background-color: #00ff00;
height: 400px;
width: 20%;
}
回答by Ankur
There can also be a solution by having both floatto left.
也可以通过同时使用float来解决left。
Try this out:
试试这个：
P.S. This is just an improvement of Ankit's Answer
PS 这只是 Ankit's Answer 的改进
回答by Stardust
Check out this fiddle:
看看这个小提琴：
http://jsfiddle.net/G6N5T/1574/
http://jsfiddle.net/G6N5T/1574/
CSS/HTML code:
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>This uses the CSS floatproperty for left, right, and center alignments of divs on a page.
这将 CSSfloat属性用于div页面上s 的左对齐、右对齐和居中对齐。
回答by Raunak Mitra
Alternatively, you can also use a special function known as the linear-gradient()function to split browser screen into two equal halves. Check out the following code snippet:
或者，您也可以使用称为linear-gradient()函数的特殊函数将浏览器屏幕分成相等的两半。查看以下代码片段：
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
Here, linear-gradient()function accepts three arguments
这里，linear-gradient()函数接受三个参数
90degfor verticaldivision of screen.( Similarly, you can use180degfor horizontal division of screen)lightbluecolor is used to represent the left half of the screen.skybluecolor has been used to represent the right half of the split screen. Here,50%has been used for equaldivision of the browser screen. You can use any other value if you don't want an equaldivision of the screen. Hope this helps. :) Happy Coding!
90deg用于屏幕的垂直分割。（同样，您可以180deg用于屏幕的水平分割）lightblue颜色用于表示屏幕的左半部分。skyblue颜色已用于表示分屏的右半部分。此处，50%已用于对浏览器屏幕进行均分。如果您不希望屏幕等分，您可以使用任何其他值。希望这可以帮助。:) 快乐编码！
回答by Vikas Gupta
Here is the flex-box approach:
这是 flex-box 方法：
CSS
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.
您可以在js fiddle 中尝试相同的方法。
