html - 使用 CSS 等列流体高度和流体宽度列布局

Question

我想创建一个相等的流体高度、相等的流体宽度的两列布局面板。

目前我正在使用这里提出的伪元素解决方案:http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403创建完美的等高列。我为每一列使用 50% 的宽度， float 以创建列布局。

我正在构建的网站将内容设置为 1200 像素的最大宽度，因此我需要将每列中的容器设置为 600 像素的最大宽度。目前，我将一个容器漂浮在左侧列中，右侧列中有一个容器漂浮在左侧，但它似乎无法正常工作。最大宽度被忽略，因此容器根本没有宽度。

我想让页面中心的列的整体内容与最大宽度的内容对齐:上下 1200 像素。

请注意，我希望列包装填满屏幕的整个宽度，而不是最大宽度。

HTML:

<div class="col-wrapper">
    <div class="half-col-1">
        <div class="cta-content">
            <p>Column 1</p>
        </div>
    </div>
    <div class="half-col-2">
        <div class="cta-content">
            <p>Column 2</p>
        </div>
    </div>
</div>

CSS:

.content {
    max-width: 1200px;
    height: 30px;
    margin: 0 auto 20px;
    background: green;
}

.col-wrapper {
    overflow: hidden;
    position: relative;
    margin: 0 auto 20px;
}

.half-col-1 {
    width: 50%;
    float: left;
}

.half-col-2 {
    width: 50%;
    float: right;
}

.half-col-1:before, .half-col-2:before {
    width: 50%;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.half-col-1:before {
    background: blue;
    left: 0;
}

.half-col-2:before {
    background: red;
    left: 50%;
}

.cta-content {
    max-width: 600px;
    color: white;
    background: rgba(255,255,255,0.1); 
}

.half-col-1 .cta-content {
    float: right;
}

.half-col-2 .cta-content {
    float: left;
}

我这里有一个 fiddle ，显示我当时所在的位置:http://jsfiddle.net/dr4up5q3/4/

我们将不胜感激。

Answer 1

似乎通过在 .cta-content 下面添加样式就可以了。

width: 100%;
max-width: 600px;

为那些需要类似解决方案的人更新了这里的 fiddle :http://jsfiddle.net/dr4up5q3/6/