css两行1列方框布局 [英] css two rows 1 column box layout

问题描述

我一直在使用flexbox的两行和1列布局，我使用flexbox，因为我不认为css2.1可以填充box-B的剩余空间。在我的例子中，我的jsFiddle，我不能得到box-C向右移动，也不能得到box-B垂直flex和填充的内容可以有人请帮我这个布局

（小内容）/ FIDDLE2 （大量内容）

标记

 < div class =container> 
< div class =row1> 
< div> A< / div> 
< div>< / div> / *给这个div表格单元格在宽屏幕上的50％宽度* / 
< / 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; 
顶部：0; 
 right：0; 
} 
 @media（max-width：1024px）{
 .row1 {
 width：100％; 
} 
 .row1 div + div {
 display：none; 
} 
 .row2 div {
 width：50％; 
} 
 .row2 div + div {
 position：static; 
} 
} 
  

I've been working on a two row and 1 column layout with flexbox, I'm using flexbox because I don't think css2.1 can fill the remainding space for box-B. In my example of my jsFiddle, I can't get box-C to shift up on the right hand side and also I can't get box-B to flex vertically and fill the contents can someone please help me with this layout

jsFiddle here

#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>

解决方案

You can do this with CSS tables (Flexbox isn't necessary)

Resize the browser to see the media queries in action!

FIDDLE1 (little content) / FIDDLE2 (lots of content)

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

这篇关于css两行1列方框布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！