我一直在使用 Flexbox 进行两行一列布局,我使用 Flexbox 是因为我认为 css2.1 无法填充 box-B 的剩余空间。在我的 jsFiddle 示例中,我无法让 box-C 在右侧向上移动,也无法让 box-B 垂直弯曲并填充内容,有人可以帮我解决这个布局吗
jsFiddle 在这里 http://jsfiddle.net/fccRD/3/
#container {
background-color:red;
width:100%; height:100%
}
#three-box-layout {
display:flex;
display:-ms-flex;
display:-webkit-flexbox;
display:-moz-flex;
height:100%;
-ms-flex-direction:column;
-webkit-flex-direction:column
}
.shuffle-box {
}
#box-a {
background-color:#f601ff; -ms-flex-order:1; -webkit-flex-order:1;
margin-right:30%;
}
#box-b {
-ms-flex:3;
-webkit-flex:3;
-moz-flex:3;
flex:3;
background-color:#37fe02;
margin-right:30%;
}
#three-box-layout #box-c {
-ms-flex:3;
-webkit-flex:3;
-moz-flex:3;
flex:3;
background-color:#02effe;
margin-left:70%; float:right;
}
<div id="container">
<div id="three-box-layout">
<div id="box-a" class="shuffle-box">
<div style="height:425px; background-color:pink">A</div>
</div>
<div id="box-b">B</div>
<div id="box-c">C</div>
</div>
</div>
您可以使用 CSS 表来做到这一点(Flexbox 不是必需的)
调整浏览器大小以查看正在运行的媒体查询!
FIDDLE1 http://jsfiddle.net/Xgr3k/4/(内容不多)/FIDDLE2 http://jsfiddle.net/Xgr3k/6/(内容很多)
Markup
<div class="container">
<div class="row1">
<div>A</div>
<div></div> /* give this div table cell 50% width on wide screens */
</div>
<div class="row2">
<div>B</div>
<div>C</div>
</div>
</div>
CSS
--
.container {
width: 800px;
height: 500px;
display:table;
text-align: center;
position: relative;
}
.row1 {
display:table-row;
max-height: 425px;
background: pink;
}
.row1 div {
display:table-cell;
width:50%;
}
.row2 {
display:table-row;
height: 100%;
}
.row2 div {
width: 100%;
height: 100%;
float:left;
background: green;
}
.row2 div + div {
background: aqua;
width: 50%;
height: 100%;
position: absolute;
top:0;
right:0;
}
@media (max-width: 1024px) {
.row1 {
width: 100%;
}
.row1 div + div {
display: none;
}
.row2 div {
width: 50%;
}
.row2 div + div {
position: static;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)