如何以相同的高度并排放置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]
编辑：我希望尽管内容高度不同，但所有div都有相同的高度
答案 0 :(得分：2)
请勿使用浮动，请用于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>
和我告诉你的身高属性。
答案 1 :(得分：0)
您可以使用Notification和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;
}
答案 2 :(得分：0)
我不确定您的HTML是否可以更改，但如果您在我的代码中更改左中心和右侧的div的顺序，那么flex-box是一种非常干净的方法此
CODE：
#container {
display: flex;
}
#container>div {
flex-direction: row;
}<body>
<div id="container">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
</body>
答案 3 :(得分：0)
您可以使用display: flex。它的巨大好处是您的内容将始终保持响应。
#container {
display: flex;
justify-content: space-between;
}<div id="container">
<div>Left</div>
<div id="content">Content</div>
<div>Right</div>
</div>
答案 4 :(得分：0)
您可以使用CSS Flex容器。
#container {
display: flex;
}
#container div {
flex: 1 0 auto;
}
检查＆＃34; flex＆＃34;的this Fiddle和browser's support and issues。
#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>
答案 5 :(得分：0)
你可以使用flex。 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>
答案 6 :(得分：0)
#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>
答案 7 :(得分：0)
如果设计的宽度非流体，则此任务变得相当容易。当流体宽度和多列发挥作用时，此任务变得更加困难。
确保实现流体宽度和等高柱的想法的一种方法是使用表格单元格。你实际上可以使用普通的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>
请注意，列底部的填充是由向下推的内容生成的，因为我们不能指望列本身的底部填充，因为它忙于其花哨的技巧。