0

我不确定这是否可以在没有 javascript 的情况下完成，但我希望它有一个解决方案。考虑这个小提琴：http: //jsfiddle.net/PPeYH/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    border: 1px solid;
    min-height: 3em;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
}
#placeholder-body {
    position: relative;
    border: 0;
}
.split-tile {
    float: left;
}
.split-left {
    width: 60%;
}
.split-left .content {
    margin-left: auto;
    margin-right: 0;
    max-width: 360px;
}
.split-right {
    width: 40%;
}
.split-right .content {
    margin-left: 0;
    margin-right: auto;
    max-width: 240px;
}

<div><div class="content container">Header</div></div>
<div id="placeholder-body">
    <div><div class="content container">Some content</div></div>

    <div class="tile-1 split-tile split-left">
        <div class="content">60% width.</div>
    </div>
    <div class="tile-2 split-tile split-right">
        <div class="content">40%</div>
    </div>

    <div><div class="content container">Some content</div></div>
</div>
<div><div class="content container">Footer</div></div>

您在此处看到的结构是 RWD 结构的简化版本。我们需要整个布局保持在它的边界内。如果您向上或向下更改浏览器宽度，您将看到标记为“60%”和“40%”的 div 不尊重其余 div 的边界。

“为什么不将 60% 和 40% 的 div 包装在一个容器中？”，您可能会问。好吧，这里介绍的 DOM 结构是在一个已经很复杂的系统中使用 CMS 布局的。要改变这一点，需要的不仅仅是一点点重构。我将不得不忍受按原样布置的瓷砖。

所以我的问题是这样的；有没有办法在中间 div 上实现 60/40 分割，这样它们将保持在布局其余部分的左右边缘，只使用 css？

更新： 我也不能将#placeholder-body 限制为最大宽度，因为我的设计师希望我为结构中的某些 div 制作全角背景颜色。

4

2 回答 2

5

如果您可以修改#placeholder-body样式，那么解决方案很简单：

#placeholder-body {
    max-width: 600px;
    margin: auto;
}

工作样本：http: //jsfiddle.net/PPeYH/1/

另一种可能：

.split-tile {
    margin: auto;
    max-width: 600px;
    width: 100%;
}
.split-left .content {
    width: 60%;
}
.split-right .content {
    margin-left: auto;
    width: 40%;
}
.split-left {
    height: 0;
}

这里没有使用浮点数，但左侧标题的高度设置为 0，但溢出是可见的，所以看起来不错。问题是当它的内容比正确的标题长时。您也可以设置负上边距 onsplit-right而不是将高度设置为 0 on split-left，但您必须知道确切的高度。

工作样本：http: //jsfiddle.net/PPeYH/3/

除此之外，还有可能calc来自 CSS3 的媒体查询：

@media screen and (min-width: 638px) {
    .split-left {
        width: 360px;
        margin-left: calc(50% - 300px);
    }
    .split-left .content {
        width: 360px;
    }
    .split-right {
        width: 240px;
        margin-right: calc(50% - 300px);
    }
    .split-right .content {
        margin-left: 0;
        width: 240px;
    }   
}

工作样本：http: //jsfiddle.net/PPeYH/5/

于 2013-11-11T12:57:17.090 回答
-1

如果您将拆分图块插入另一个可以工作的容器中，请拨弄。

<div class="container">
    <div class="tile-1 split-tile split-left">
        <div class="content">
            60% width.
        </div>
    </div>
    <div class="tile-2 split-tile split-right">
        <div class="content">
            40%
        </div>
    </div>
</div>
于 2013-11-11T12:52:32.283 回答