-2

在此示例中，两个文本块在左侧垂直对齐，但我找不到（经过大量研究和多次尝试）如何在两侧对齐它们：

<div style="text-align: justify; padding: 10px;">some wrapped (long enough) text
    <table style="margin-left: -7px; width: 100%; border: 3px solid red">
        <tr><td>some wrapped (long enough) text</td></tr>
    </table>
</div>

这只是一个简化的例子；该表实际上包含多个原始和列。垂直对齐一方面涉及 div 中的文本，另一方面涉及表格中的文本。

让我重新表述一下这个问题：我可以调整 div 内的表格大小，使其相对于浏览器具有 100% 的大小，并且独立于容器 div 的边距和填充？

如果我可以添加类似 width:(100%+7px); 之类的东西，那就太好了。

最后我得出了这个折衷/解决方法：细边框（1px），边距和填充百分比，以及计算宽度百分比（> 100）。

4

2 回答 2

0

您可以只使用FLOAT，不要使用表，如下所示：

<div style="text-align: justify; padding: 10px;">
   <div style="float:left">text text text text</div>
   <div style="float:left">text text text text</div>
</div>

或 "float:right" 用于第二个。

不要忘记做：

<div style="clear:both"></div>

最后（如有必要）。

注意：除非必要，否则不要使用表（例如统计表）。

于 2013-06-22T11:20:50.890 回答
0

解决方案是使用float:leftand float:right。在您的情况下，使用 2 个 div 足以满足您的需求。检查演示

<div style="text-align: justify; padding: 10px;">
   <div style="float:left">some wrapped (long enough) text</div>
   <div style="float:right">some wrapped (long enough) text</div>
</div>

如果您仍然想使用表。这也是可能的，但我看不到在这里使用表格的意义

<div style="text-align: justify; padding: 10px;">
       <div style="float:left">some wrapped (long enough) text</div>
       <table style="float:right;margin-left: -7px; border: 3px solid red">
        <tr><td>some wrapped (long enough) text</td></tr>
    </table>
</div>

检查演示

于 2013-06-22T11:13:24.117 回答