使用 CSS 的相等列流体高度和流体宽度列布局答案

【问题标题】：Equal column fluid height and fluid width column layout using CSS使用 CSS 的相等列流体高度和流体宽度列布局
【发布时间】：2014-10-28 22:13:52
【问题描述】：

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

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

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

我想保持页面中心列的整体内容与 max-width: 1200px 上下的内容对齐。

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

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

我在这里有一个小提琴，显示我现在所处的位置：http://jsfiddle.net/dr4up5q3/4/

我们将不胜感激。

【问题讨论】：

只需将max-width 也应用于.col-wrapper。
嘿，我已经编辑了问题 - 我希望列包装器全宽。不过谢谢！

标签： html css layout fluid-layout

【解决方案1】：

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

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

在这里为需要类似解决方案的人更新了小提琴：http://jsfiddle.net/dr4up5q3/6/

【讨论】：