html - 为 3 个 div 设置固定高度

Question

我的代码 header 有问题。标题分为 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 中。然后 float child 并给他们一个相对宽度。

<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% }