0

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

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

jsFiddle，其中的列根本表现不佳。它们都应该从容器 div 的顶部开始。

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

4

5 回答 5

3

您仍然可以使用 float 而无需任何技巧，并且您的 HTML 标记如下：

CSS

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

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

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

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

于 2012-12-10T17:43:14.243 回答
1

简单修复：

给float: left;两者.leftColumn, 和.rightColumn。要清除浮动，overflow: hidden;请给.container.

CSS

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

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

于 2012-12-10T17:42:21.487 回答
1

显示 inline-block 不起作用或无法正确对齐的原因是 inline-block 考虑了空格。

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

有关工作示例，请参见此处：http: //jsfiddle.net/4Nmmq/2/

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

于 2012-12-10T17:45:40.917 回答
1

将 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/ <--这是一个小提琴。​</p>

于 2012-12-10T17:46:10.933 回答
0

您可以使用display: table-cell;和display: table;CSS 属性来执行此操作。没有浮动。没有清算。vertical-align:top将确保内容保持在 div 的顶部。

jsFiddle 示例

.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;
}

​</p>

于 2012-12-10T17:40:55.077 回答