Question

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

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

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

我想保持页面中心列的整体内容与最大宽度：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/

任何帮助都会得到很好的接受。

Answer 1

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

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

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

使用CSS的等柱流体高度和流体宽度列布局

1 个答案: