让我们看看这张表:
<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黑客攻击。
答案 0 :(得分:1)
我认为您希望查看flexbox
的现代浏览器,并为旧浏览器提供JavaScript后备。
http://css-tricks.com/using-flexbox/
Flexbox非常棒,无疑是布局未来的一部分。在过去几年中,语法发生了很大的变化,因此“旧”和“新”语法。但是如果我们将旧的,新的和中间的语法编织在一起,我们就可以获得不错的浏览器支持。特别是对于一个简单且可能是最常见的用例:订单控制网格
http://caniuse.com/flexbox显示相当不错的支持.. IE10,FF,Chrome,Safari,甚至Opera! *
*使用组合的“新旧”语法
答案 1 :(得分:1)
我假设你想要&#34;列&#34;与内容一起增加宽度?动态设置列中每个div的宽度?
我无法想到用css做到这一点的方法,但是有些div的jiggery pokery可能有效。
<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>
答案 2 :(得分:0)
<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>
并使用css来设置样式:宽度,高度,边距,每个div的位置