html - 如何让 div 填满所有宽度并像 TR 中的 TDs 一样排成一行？

Question

我正在尝试使用 div 模仿表格行和单元格。我想要与以下相同的结果:

<table width = '100%'>
    <tr>
        <td>asd</td>
        <td>dsa</td>
    </tr>
</table>

并以这种方式尝试:

<div style = 'width: 100%; border: dashed;'>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>asd</div>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>dsa</div>
</div>

还有:

<div style = 'width: 100%; border: dashed;'>
    <div style = 'width: 50%; display: inline; border: dashed;'>asd</div>
    <div style = 'width: 50%; display: inline; border: dashed;'>dsa</div>
</div>

当内部 div 的宽度为 100% 时。

但是内部 div 永远不会填满父 div 的整个宽度。最好的情况 - 它们是一个接一个，但是“最小以适应内容宽度”

Answer 1

将display: table;添加到父div。

<div style = 'width: 100%; border: dashed; display: table;'>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>asd</div>
    <div style = 'width: 50%; display: table-cell; border: dashed;'>dsa</div>
</div>

http://jsfiddle.net/kgemxvu7/