CSS – 等高度列？
在CSS中，我可以做这样的事情：
替代文字http://i50.tinypic.com/2lcp555.png
但我不知道如何改变这样的东西：
替代文字http://i48.tinypic.com/30jp9nk.png
这可能与CSS？
如果是的话，我怎么能没有明确指定的高度（让内容增长）？
Flexbox的
如果您在2013年末阅读本文，您可以使用flexbox。 假设这个布局：
<div class="row"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div> 对于flexbox，等高的列只是一个声明：
.row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ }
浏览器支持： http ： //caniuse.com/flexbox ; 演示： http : //jsfiddle.net/7L7rS/
表格布局
如果您仍然需要支持IE 8或9，那么您必须使用表格布局：
.row { display: table; } .col { display: table-cell; width: 33.33%; /* depends on the number of columns */ }
演示： http : //jsfiddle.net/UT7ZD/
是。
这里是文章使用完成的CSS。 阅读整篇文章是非常值得的 ，因为作者一步一步地进入你所需要做的工作。
#container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; }
这不是唯一的方法，但这可能是我遇到的最优雅的方法。
还有另一个网站是完全按照这种方式完成的， 查看源代码可以让你看到他们是如何做到的 。
给overflow: hidden到容器和大（和相等）的负余量和积极的填充列。 请注意，此方法有一些问题，例如锚链接将不会在您的布局内工作。
标记
<div class="container"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
CSS
.container { overflow: hidden; } .column { float: left; margin-bottom: -10000px; padding-bottom: 10000px; }
结果
你可以使用CSS表格，就像这样：
<style type='text/css"> .container { display: table; } .container .row { display: table-row; } .container .row .panel { display: table-cell; } </style> <div class="container"> <div class="row"> <div class="panel">...text...</div> <div class="panel">...text...</div> <div class="panel">...text...</div> </div> </div>
你可以用下面的JavaScript轻松做到这一点：
$(window).load(function() { var els = $('div.left, div.middle, div.right'); els.height(getTallestHeight(els)); }); function getTallestHeight(elements) { var tallest = 0, height; for(i; i < elements.length; i++) { height = $(elements[i]).height(); if(height > tallest) tallest = height; } return tallest; };
你可以尝试它…它适用于我和所有浏览器兼容…
<div id="main" style="width:800px; display:table"> <div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div> <div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div> </div>
响应答案：
CSS flexbox是可爱的，但今天切断IE9的用户是有点疯了。 截至2015年8月1日，我们的物业：
3％IE9
2％IE8
切出这些是显示5％一个破碎的页面？ 疯。
使用媒体查询Bootstrap的方式可以回到IE8，就像display: table/table-cell 。 所以：
http://jsfiddle.net/b9chris/bu6Lejw6/
HTML
<div class=box> <div class="col col1">Col 1<br/>Col 1</div> <div class="col col2">Col 2</div> </div>
CSS
body { font: 10pt Verdana; padding: 0; margin: 0; } div.col { padding: 10px; } div.col1 { background: #8ff; } div.col2 { background: #8f8; } @media (min-width: 400px) { div.box { display: table; width: 100%; } div.col { display: table-cell; width: 50%; } }
在这种情况下，我使用400px作为列和垂直布局之间的切换，因为jsfiddle窗格趋势相当小。 随着窗口的大小，你会看到很好地重新排列自己的列，包括伸展到完整的高度时，他们需要成为列，所以他们的背景颜色不会中断的页面。 没有疯狂的填充/边缘黑客入侵后，在页面上的标签，并没有折腾5％的游客到狼。
另一个select是使用这个已经解决的框架。 Bootstrap目前没有一个相同的高度选项，但由Zurb基金会做，你可以看到它是如何工作在这里： http : //foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
下面是一个如何使用它的例子：
<div class="row" data-equalizer> <div class="large-6 columns panel" data-equalizer-watch> </div> <div class="large-6 columns panel" data-equalizer-watch> </div> </div>
基本上他们使用JavaScript来检查最高的元素，并使其他高度相同。
所以，如果你只想要CSS这将增加更多的代码，但是如果你已经使用了一个框架，那么他们已经解决了这个问题。
快乐的编码。
现代的做法：CSS网格。
HTML：
<div class="container"> <div class="element">{...}</div> <div class="element">{...}</div> <div class="element">{...}</div> </div>
CSS：
.container { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .element { border: 2px solid #000; }
现场的例子就在这里 。
repeat(auto-fit, minmax(200px, 1fr)); 部分设置列宽。 每列只占用一部分可用空间，但不能小于200像素。 它不是缩小到200像素以下，而是包裹在下面，所以它甚至是响应式的。 你也可以有任意数量的列，而不仅仅是3列。
如果您只需要3列，请使用grid-template-columns: repeat(3, 1fr); 代替。 你仍然可以有更多的元素，他们将包装，响应，但总是被放置在3列布局。
更多关于MDN或CSS技巧的 CSS网格。
它干净，可读，可维护，灵活，使用起来也很简单！
这里是我刚刚在SASS中用可变的列间距和列数量（variables）写的一个例子：
CSS：
.fauxer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fauxer { overflow: hidden; } .fauxer > div { display: table; border-spacing: 20px; margin: -20px auto -20px -20px; width: -webkit-calc(100% + 40px); width: -moz-calc(100% + 40px); width: calc(100% + 40px); } .fauxer > div > div { display: table-row; } .fauxer > div > div > div { display: table-cell; width: 20%; padding: 20px; border: thin solid #000; }
<div class="fauxer"> <div> <div> <div> Lorem column 1 </div> <div> Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div> Lorem column 3 </div> <div> Lorem column 4 </div> <div> Lorem column 5 </div> </div> </div> </div>
