html - CSS 在一个 div 中定位两列

Question

我有两个 <div>容器内。它们充当左列和右列。右栏的高度会有所不同，而左栏只是一张图片和一些文本。

如何在不使用 float 和清除 div hack 的情况下正确定位它们？使用这些样式意味着我将需要额外的 HTML 和通常过多的 CSS。

jsFiddle where the columns do not behave nicely at all. They should both start at the top of the container div.

我假设你可以用 display: inline-block 做到这一点.但是当我这样做时，其中一列通常有奇怪的垂直定位。

Answer 1

您仍然可以使用 float 而无需任何 hack 和您的 HTML 标记，如下所示:

CSS

.container {
    /* this clears the float */
    overflow: hidden;
}

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

我只发布了更改的部分。

演示:http://jsfiddle.net/NhS98/