html - CSS在div中放置两列

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

如何在不使用float和clear 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来执行此操作。但是当我这样做时，其中一列通常具有奇怪的垂直位置。

最佳答案

您仍然可以使用float而不会有任何黑客攻击，并且您的HTML标记如下所示：

的CSS

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

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

我只发布了已更改的部分。

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

关于html - CSS在div中放置两列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13806143/