我有一个容器,其中有动态数量的 div。我希望所有的 div 都适合在一行上而不换行,以便每个 div 具有相同的宽度。 div 的数量和屏幕的大小都可以改变。我希望有一个CSS解决方案。
In 这把小提琴 http://jsfiddle.net/XnC6k/灰色框应填充三个相同大小的红色、绿色和蓝色矩形。
我试过这个没有效果。
#container {
width: 400px;
border: 2px solid #CCCCCC;
}
#container div {
width: auto;
display: inline-block;
height: 200px;
}
感谢您的任何帮助,您可以提供!
让你的 html 分隔线表现得像一个表格集。桌子分隔线 (<td>
) 默认情况下均匀分布。
HTML
<div class="table-div" style="width:100%">
<div class="tr-div">
<div class="td-div">td-div 1a</div>
<div class="td-div">td-div 2a</div>
<div class="td-div">td-div 3a</div>
<div class="td-div">td-div 3b</div>
</div>
<div class="tr-div">
<div class="td-div">td-div 1b</div>
<div class="td-div">td-div 2b</div>
<div class="td-div">td-div 3b</div>
<div class="td-div">td-div 3b</div>
</div>
</div>
CSS
.table-div{display:table} /* you can add table-layout:fixed; to suit your needs ([Yoshi][1])*/
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}
See http://jsfiddle.net/sPm9M/ http://jsfiddle.net/sPm9M/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)