我如何并排放置3个Div的高度
我想做：
[LEFT][ CENTER ][RIGHT]
[LEFT][ CENTER ][RIGHT]
[LEFT][ CENTER ][RIGHT]
[LEFT][ CENTER ][RIGHT]
我有：
<div id="container">
<div style="float:left;">Left</div>
<div style="float:right;">Right</div>
<div id="content">Content</div>
</div>，最终以
结束[ LEFT][ CENTER ][ RIGHT]
[ LEFT][ CENTER ][ RIGHT]
[CENTER][ CENTER ][CENTER]
[CENTER][ CENTER ][CENTER]
[CENTER][ CENTER ][CENTER]
或
[ LEFT][ CENTER ][ RIGHT]
[ LEFT][ CENTER ][ RIGHT]
[ LEFT][bodybackground][ RIGHT]
[ LEFT][bodybackground][ RIGHT]
[ LEFT][bodybackground][ RIGHT]
编辑：尽管内容高度不同，但我希望所有Divs都具有相同的高度
不要使用float，用于left:0px;和right:0px;
对于高度，使用height: 0;position: relative;padding-bottom: 70%;
顺便说一句，如果您对CSS不太好，我建议您使用bootstrap，然后简单地用
制作您想要的东西<div style="col-md-2"></div>
<div style="col-md-8"></div>
<div style="col-md-2"></div>
和我告诉您的高度属性。
我不确定您的html是否可以更改，但是如果您更改Div的左中心和右侧的顺序，那么Flex-Box是一种非常干净的方式为此。
代码：
#container {
display: flex;
}
#container>div {
flex-direction: row;
}<body>
<div id="container">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
</body>您可以使用display:table和display:table-cell代替float
.container{display:table; width:100%}
.container div {display:table-cell; vertical-align:middle;}
.container div:first-child {
background:red;
}
.container div:nth-child(2) {
background:yellow;
}
.container div:last-child {
background:blue;
}<div class="container">
<div>blablabla<br>blablabla</div>
<div>blablabla<br>blablabla</div>
<div>blablabla<br>blablabla<br>blablabla<br>blablabla<br>blablabla<br>blablabla</div>
</div>您可以使用CSS Flex Container 。
#container {
display: flex;
}
#container div {
flex: 1 0 auto;
}
检查此小提琴和浏览器的支持以及" flex"的问题。
#container {
display: flex;
}
#container div {
border: 1px solid #ccc;
flex: 1 0 auto;
background-color: #ffc;
}<div id="container">
<div>left</div>
<div>lorem ipsum dolor sit amet<br><br><br></div>
<div>right</div>
</div>您可以使用Flex。该挠性提供了更多的舒适感，可以将列分开并为行中的所有这些列提供相同的高度。
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.flex-box {
display: -webkit-box;
display: flex;
}
.width-10 {
width: 10%
}
.width-30 {
width: 30%
}
.width-50 {
width: 50%
}<div class="flex-row flex-box">
<div class="width-10">...</div>
<div class="width-10">...</div>
<div class="width-30">...</div>
<div class="width-50">...</div>
</div>#container {
position: relative;
background: #eee;
z-index: 1;
width: 100%;
display: inline-block;
}
#container .col {
position: relative;
width: 27%;
padding: 3%;
float: left;
}
#container .col:nth-child(1) {
left: 33%;
}
#container .col:nth-child(2) {
left: -33.3%;
}
#container .col:nth-child(3) {
left: 0;
}
#container:before,
#container:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 33.4%;
width: 33.4%;
height: 100%;
background: #ccc;
}
#container:after {
left: 66.667%;
background: #eee;
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}<div id="container" class="group">
<div class="col">
<h3>I am listed first in source order.</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>如果设计是 non-fluid 宽度，则此任务变得非常容易。当流体宽度和多列开始发挥作用时，此任务变得更加困难。
确保开火的一种方法是使用表单元格的流体宽度和相等高度柱的概念。您实际上可以使用普通的div标记，但仍然强迫它像桌子一样行为。
除了使用舒适的标记外，我们实际上保存了一些标记，因为我们可以从桌子到表单元格。没有元素需要模拟表行。
<style>
.container {
display: table;
/* Just if you need all viewport layout */
/*position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
height: 100%;*/
}
.container .colum {
display: table-cell;
width: 25%;
padding: 25px;
}
.container .colum:nth-child(even) {
background: #ccc;
}
.container .colum:nth-child(odd) {
background: #eee;
}
</style>
<div class="container">
<div class="colum"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa non soluta dolor eveniet nulla delectus corrupti vero ex hic eos quam, ad, fugit totam, voluptatibus illum aliquid fugiat ea amet?</p></div>
<div class="colum"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam iusto quos voluptates aliquam, sed sapiente rem voluptatum maxime? Vitae, quia. Omnis sit voluptatem accusantium! Numquam ab, sequi quisquam recusandae perferendis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi quam repellat deleniti ipsam, nulla. Earum totam assumenda quos aspernatur, dolore aliquam ab perspiciatis illum consequuntur quo minima reprehenderit dignissimos, nisi!</p></div>
<div class="colum"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis fugit placeat cum, nemo, ex delectus similique, doloribus a tempore aspernatur eum beatae cupiditate magnam. Odio repudiandae a, ab perferendis vero.</p></div>
</div>
这种方法很好，但是它们在IE 7中不支持它们，因此，如果您有兴趣走这条路线，我建议您仅使用实际的表格标记。
与往常一样，另一种方式对所有列都使用包装元素。该包装器设置为隐藏的溢出，这不仅可以清除浮动的列，而且还隐藏了任何粘在其外面的东西。这尤其重要，因为我们将迫使列的高度非常高，然后用隐藏的溢出将它们切断。
这里的目的是，尽管我们用大量的底部填充强制柱子更高，但我们会以相等数量的负底部边缘吸收包装器的高度。这给了我们所需的效果。
<style>
.container {
overflow: hidden;
}
.container .colum {
width: 27%;
padding: 30px 3.15% 0;
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.container .colum:nth-child(even) {
background: #ccc;
}
.container .colum:nth-child(odd) {
background: #eee;
}
.container .colum p{
margin-bottom: 30px;
}
</style>
<div class="container">
<div class="colum"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque id hic, eius quae laborum ipsum corporis rem dolores accusamus provident ut perspiciatis nobis expedita obcaecati velit tenetur dolor, asperiores magni.</p></div>
<div class="colum"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, dicta modi inventore molestiae excepturi, labore unde ea porro consectetur beatae eos, repellat perferendis sunt deleniti, velit ipsam vitae aliquam quisquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, neque, perspiciatis quod omnis, magnam in facilis reprehenderit aperiam, iusto laudantium nisi. Voluptas illum accusantium, odit alias eum. Esse, non, totam?</p></div>
<div class="colum"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae exercitationem iure nihil in. Ut nostrum expedita, voluptatum saepe consectetur aut reiciendis dolor exercitationem, eligendi nulla facere eaque earum asperiores non.</p></div>
</div>
请注意，列的底部填充是由向下推下的内容生成的，因为我们无法指望列本身上的底部填充，因为它忙于其花式技巧。
您可以使用display: flex。它的最大好处是您的内容将始终保持响应迅速。
#container {
display: flex;
justify-content: space-between;
}<div id="container">
<div>Left</div>
<div id="content">Content</div>
<div>Right</div>
</div>