Question

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

<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>

这只是一个简单的例子;该表实际上包含多个raws ans列。垂直对齐一方面涉及div中的文本，另一方面涉及表中的文本。

让我重新解释一下这个问题：我可以在div中调整一个表格，使其相对于浏览器具有100％的百分比，并且独立于容器div的边距和填充吗？

如果我可以添加宽度：（100％+ 7px）;

，那就太棒了

最后，我采用了这种妥协/解决方法：薄边框（1px），边距和填充（％），计算宽度（％）（＆gt; 100）。

Answer 1

解决方案正在使用float:left和float:right。在您的情况下，使用2个div足以实现您的需求。查看demo

<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>

检查demo

Answer 2

您可以使用 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>

最后（如有必要）。

N.B：不要使用表，除非它是必要的（例如统计表）。

div中的表：如何垂直对齐div和table中的文本

2 个答案: