Question

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

如何在不使用浮动和清除div黑客的情况下正确定位这些？使用这些样式意味着我需要额外的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

你仍然可以使用没有任何黑客的浮动和你的HTML标记：

<强> CSS

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

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

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

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

Answer 2

简单修复：

将float: left;同时提供给.leftColumn和.rightColumn。要清除浮动广告，请将overflow: hidden;提交给.container。

CSS

.container {overflow: hidden;}
.leftColumn, .rightColumn {float: left;}

小提琴：http://jsfiddle.net/qYGeY/

Answer 3

显示内联块不起作用或者没有正确对齐的原因是因为内联块占用了空白区域。

<div class="container"><div class="leftColumn">abc</div><div class="rightColumn">content</div></div>

请参阅此处了解工作示例：http://jsfiddle.net/4NmMq/2/

当你有一个空格时，在这种情况下，标签前面的标签显示在浏览器中，因此它没有对齐。

Answer 4

将div设置为相对div内的绝对值，如下所示：

.container {
    background: rgb( 240, 240, 240);
    width: 300px;
    position:relative;
}

.leftColumn {
    display: block;
    position: absolute;
    top:0;
    left:0;
}

 .photoHolder {
    width: 40px;
    height: 50px;
    background: rgb(200, 200, 245);
}

.rightColumn {
    display: block;
    width: 250px;
    height: 400px;
    background: rgb( 200, 244, 244);
    position: absolute;
    top:0;
    right:0;
}

http://jsfiddle.net/yArWb/9/＆lt; - 这是一个小提琴。

Answer 5

您可以使用display: table-cell;和display: table; CSS属性来执行此操作。没有花车。没有清算。 vertical-align:top将确保内容始终位于div的顶部。

<强> jsFiddle example

.container {
    background: rgb( 240, 240, 240);
    width: 300px;
    display:table;
}
.leftColumn {
    display: table-cell;
}
.photoHolder {
    width: 40px;
    height: 50px;
    background: rgb(200, 200, 245);
}
.rightColumn {
    display: table-cell;
    width: 250px;
    height: 400px;
    background: rgb( 200, 244, 244);
    vertical-align:top;
}

CSS在div中定位两列

5 个答案:

简单修复：

CSS

小提琴：http://jsfiddle.net/qYGeY/