没有表格可以做这种HTML布局吗？

Question

我想做一个两列布局，左边的图片对应右边的一个文本块。我希望每行之间的边距介于最高的项目之间，我希望较短的项目垂直居中于其行上的另一个项目。

这可能吗？看起来使用表格会相当简单，但我想使用干净的标记来处理无格式的内容，而且它实际上并不是表格数据意义上的表格。如果没有其他更多的语义方式，我会接受使用表格。

Answer 1

这是一个基本的布局......我用div来伪造图像和文本块，但你会得到一般的想法......

FIDDLE

Answer 2

您可以使用display:table-row和display:table-cell完美实现此目标（如果您不需要IE7支持）：

http://jsfiddle.net/ptriek/kMczt/

您也可以使用常规浮动来实现它，但是您将无法垂直居中图像......

Answer 3

你的照片对我来说就像一张桌子。 使用表格没有任何问题，但如果你不想使用表格标签，你可以这样做：

<div class="table">
        <div class="tr" name="row1">
            <div class="td">
                <img src="pic1.jpg" alt="alt_text">
            </div>
            <div class="td">
                Row 1 Text
            </div>
        </div>
        <div class="tr" name="row2">
            <div class="td">
                <img src="pic2.jpg" alt="alt_text">
            </div>
            <div class="td">
                Row 1 Text
            </div>
        </div>
        <div class="tr" name="row3">
            <div class="td">
                <img src="pic3.jpg" alt="alt_text">
            </div>
            <div class="td">
                Row 1 Text
            </div>
        </div>  
    </div>

然后您可以使用CSS将行间隔开，并且每行的高度将等于两个内容列的较高者。我不是CSS向导，但也许这样的东西会起作用：

div.tr{
    height:auto;
    margin-bottom:20px;
}

tr.td{
    height:100%;
    vertical-align: middle;
}

这些东西大部分都是由桌子自动完成的。不过，我可以理解你怎么可能不希望你的布局成为一个“桌子”。