我不确定如果没有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设置全角背景色。
如果可以修改#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,但可见溢出,因此看起来不错。问题是当它的内容比正确标题中的内容长时。您也可以在上设置负的上边距,split-right
而不是在上将height设置为0 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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句