Div结构，每列的自动宽度相同
Div结构，每列的自动宽度相同
提问于 2013-02-27 22:03:52
让我们看看这张表：
<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>我需要做一些类似的事情，但使用DIV元素(对不起，老板不允许表格)。真正的问题是，如何在不直接设置的情况下设置相同的宽度？我的意思是，如果第一行更长，那么它将是实际的宽度，否则第二行的宽度。最好没有javascript/jQuery黑客。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-27 22:19:24
我假设您希望“列”的宽度与内容一起增长？是否动态设置列中每个div的宽度？
我想不出用css做这件事的方法，但一些带有div的小把戏也许能行得通。
<style>
.table{
border:1px solid black;
position:relative;
}
.column{
border:1px solid red;
display:inline-block;
}
.cell{
border:1px solid blue;
float:left;
clear:both;
}
</style>
<div class="table">
<div class="column">
<div class"cell">11</div>
<div class"cell">ffff</div>
</div>
<div class="column">
<div class"cell">1111</div>
<div class"cell">f</div>
</div>
<div class="column">
<div class"cell">1</div>
<div class"cell">fff</div>
</div>
</div>Stack Overflow用户
发布于 2013-02-27 22:10:57
我认为您应该尝试一下适用于现代浏览器的flexbox，以及适用于旧浏览器的JavaScript后备。
http://css-tricks.com/using-flexbox/
Flexbox非常棒，肯定是布局未来的一部分。在过去的几年里，语法发生了很大的变化，因此出现了"Old“和"New”语法。但是，如果我们将旧的、新的和中间的语法组合在一起，我们就可以获得不错的浏览器支持。特别是对于一个简单且可能是最常见的用例:顺序控制网格。
http://caniuse.com/flexbox显示出相当不错的支持..IE10，FF，Chrome，Safari，甚至Opera！*
*使用组合的“新旧”语法
Stack Overflow用户
发布于 2013-02-27 22:06:40
<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>并使用css设置样式:每个div的宽度、高度、边距和位置
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15114033
复制相关文章
相似问题
腾讯云开发者
