设置3个div的固定高度

Question

我的代码标题存在问题。标题分为3个不同的列，其中两个列当前填充了文本和图像。 （中心尚未填补）。

我注意到当我缩小浏览器的大小（放大，缩小）时，两个标题列开始脱离内容。右列保持固定为下面的内容，因为它填充了文本，但是中间列和左列填充较少，开始脱离。

是否可以强制我的3列标题保持附加到下面的内容？我担心，如果有人在大屏幕或视网膜显示器上观看该网站，它将会脱离。

<div class="col span_1_of_3 a">
<div class="col span_1_of_3 b">
<div class="col span_1_of_3 c">

CSS如下：

.span_3_of_3 {
width: 100%;

}

/* line 28, ../sass/test.scss */
.span_2_of_3 {
width: 66.1%;
height:100%;
}

/* line 32, ../sass/test.scss */
.span_1_of_3 {
width: 33.32%%;
height:100%;

}

Answer 1

将div包装在父div中。然后浮动孩子并给他们一个相对宽度。

<div class="header">
    <div class="col span_1_of_3 a">
    <div class="col span_1_of_3 b">
    <div class="col span_1_of_3 c">
</div>

的CSS：

.header { width:100%; overflow:auto; }
.col { float:left; width:30% }

Answer 2

您可以在display: table-cell上使用.col，在父级（*）上使用display: table。这将迫使你的“细胞”具有相同的高度并保持在同一行 虽然我想知道你是如何管理你的智慧的？是百分比还是em？你没有包含任何CSS，所以无法想象。

（*）如果要应用精确的宽度，请在同一个父级上添加table-layout: fixed，否则浏览器也会适应每个“单元格”的内容。

Answer 3

除非您将宽度/高度设置为百分比或相对值，否则图像重新调整大小将失控。

如果您不想这样做，只需设置min-width和min-height CSS属性。

我更喜欢相对尺码（例如width: 30%; text-align: left;）