如何使div填充所有宽度并像TR中的TD一样在一行？

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的整个宽度。 最好的情况 - 它们是一个接一个，但＆＃34;最小化以适应内容宽度＆＃34;

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/

Answer 2

您需要将display: table添加到包含表格行/单元格的div中，然后只删除width: 50%内容。

<div class="table" style="width: 100%; display: table;">
    <div style="display: table-row">
        <div style="display: table-cell">
            Data1
        </div>
        <div style="display: table-cell">
            Data2
        </div>
    </div>
</div>

看看这个jsFiddle看看我是如何用CSS做的。

http://jsfiddle.net/Chartax/3mysLndy/

但是看看你的其他问题，看起来你想要使用表格来布局而不是div。只是将标签更改为div并使它们都与表格完全相同，这不是真正的方法。

使用具有动态大小调整的div（宽度：20％等），以便您对用户的浏览器和屏幕大小做出反应。