css - 如何填充表格单元格的整个水平空间？

Question

我试图在我的 table 上制作这些 div 以填充单元格的整个空间，即使没有足够的内容也是如此。

如果您在下面看到，第一个单元格 (data_cell1_lt) 没有完全水平填充文本，因此它使苹果图像 (data_cell3_lt) 向左移动。

接下来的两行文本和图像完美地排列在一起，但这只是因为有足够的文本来填满整个单元格。

http://jsfiddle.net/UMf3k/106/

<div class="wrapper-data">
    <div class="data_row">
        <div class="data_cell1_lt">
            <p>Fill the entire space.</p>
        </div>
        <div class="data_cell2_lt">
            &nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div>
    </div>
    <div class="data_row">
        <div class="data_cell1_lt">
            <p>Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.</p>
        </div>
        <div class="data_cell2_lt">
            &nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div>
    </div>
    <div class="data_row">
        <div class="data_cell1_lt">
            <p><p>Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.</p>
        </div>
        <div class="data_cell2_lt">
            &nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div>
    </div>
</div>

Answer 1

你想要像this这样的东西吗？ ？

我刚刚在 .data-row 类中添加了 width: 100%;