css - 如何换行以匹配缩进

Question

在缩进由前面的单词设置的情况下，最好的换行方式是什么，这样任何换行的文本都将继续使用相同的缩进。像这样:

http://i.imgur.com/61rVCQk.png

我也制作了一个 JSfiddle - http://jsfiddle.net/dangoodspeed/DbYFb/1/

.left { float:left; font-weight:bold; margin-right:.5em; }

我知道我可以用每行一个表格来做到这一点，但必须有更好的方法。

Answer 1

根据您的屏幕截图，这似乎产生了您需要的效果。你说你不想要 table 。这些不完全是表格，只是表现得像表格单元格的 div :)

http://jsfiddle.net/DbYFb/18/

行被包裹在一个表现正常的 div 中，而两列都被赋予 display: table-cell 以获得您想要的效果。这是否比使用实际表格更好取决于您。

<div class="row">
    <div class="left">Name:</div>
    <div class="right">John Doe</div>
</div>

.row div {
    display: table-cell;
}