html - div 结构，每列的自动宽度相同

Question

让我们看看这张表：

<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 黑客攻击。

Answer 1

我认为您想检查flexbox现代浏览器，并为旧浏览器提供 JavaScript 后备。

http://css-tricks.com/using-flexbox/

Flexbox 非常棒，肯定是布局未来的一部分。在过去几年中，语法发生了很大变化，因此出现了“旧”和“新”语法。但是，如果我们将旧的、新的和中间的语法结合在一起，我们可以获得不错的浏览器支持。特别是对于一个简单且可能是最常见的用例：顺序控制的网格

http://caniuse.com/flexbox显示了相当不错的支持.. IE10、FF、Chrome、Safari 甚至 Opera！*

*使用组合的“新旧”语法

Answer 2

我假设您希望“列”的宽度与内容一起增长？动态设置列中每个 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>

Answer 3

<div id="main_div">
  <div id="nr1">   </div>
  <div id="nr2">   </div>
</div>

并且您使用 css 来设置样式：宽度、高度、边距、每个 div 的位置