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

Question

所以基本上我想要达到的效果是这样的：

          Wrapped Text Wrapped
 Text     Text Wrapped Text
          Wrapped Text

就好像它们在两个单独的 td 中一样，在这种情况下，代码将如下所示：

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

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

score 4 · Accepted Answer

将文本块放在 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 所指出的，这给您带来了将任一单元格垂直居中的挑战。该解决方案很棘手，并且取决于您的文本要求——它总是单行的吗？细胞的高度会固定吗？有关各种情况下的解决方案，请参阅使用 CSS 进行垂直居中。

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

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

在这里看到这个工作：http: //jsfiddle.net/GyMbS/1/

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

1 回答 1