如何在表格中缩进文本，但没有表格？

Question

所以基本上我想要实现的效果如下：

          Wrapped Text Wrapped
 Text     Text Wrapped Text
          Wrapped Text

好像他们在两个单独的tds中，在这种情况下，代码将如下所示：

<table>
<tr>
<td>Text</td>
<td style="width: 150px;">Wrapped Text Wrapped Text Wrapped Text Wrapped Text</td>
</tr>
</table>

但我想在没有表格的情况下完成此效果，但是使用HTML＆amp; CSS。这怎么可能？

Answer 1

将文本块放在div中并浮动它们：

HTML：

 <div id="div1">
    Text
 </div>


 <div id="div2">
       Text Wrapped Text
      Wrapped Text
         Wrapped Text Wrapped
 </div>

CSS

 #div1, #div2{float:left;width:100px}

在此处查看此行动：http://jsfiddle.net/GyMbS/

......但正如Amberlamps指出的那样，这会给你带来垂直中心任一细胞的挑战。这个解决方案很棘手，并且取决于你的文本要求 - 它总是一行吗？细胞的高度是否会固定？有关各种情况下的解决方案，请参阅Vertical Centering With CSS。

更新 - 替代
或者您可以在div上使用display:table-cell，这使得左侧单元格的垂直对齐变得更加简单：

#div1, #div2{display:table-cell;vertical-align:middle;width:100px;}​

在此处查看此工作：http://jsfiddle.net/GyMbS/1/

Major Caveat ：需要IE8 +或非IE浏览器（参见：http://caniuse.com/#feat=css-table）