柔性箱布局，左侧两个项目，右侧一个

问题描述：

┌─┬─────┐ 
│A│  │ 
├─┤ C │ 
│B│  │ 
└─┴─────┘

是否有可能这样做没有包装A和B为包装？

对于预定义的高度，是的，你的身高也是预定义的？ – LGSon

不幸的是，没有。有最小高度，但A可能包含几行文本，所以我想使用flexbox，所以事情会垂直居中。所以我结束了这样的事情 - https://jsfiddle.net/ndrw/6mrvyn0e/2/ – ndrw

答

是的，这是可能的。考虑到在这个例子中主容器具有固定的宽度和高度。

#container{ 
 
    height: 200px; 
 
    width: 300px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 

 
#container, #A, #B, #C{ 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
} 
 

 
#A{ 
 
    height: 50%; 
 
    width: 100px; 
 
} 
 

 
#B{ 
 
    height: 50%; 
 
    width: 100px; 
 
} 
 

 
#C{ 
 
    height: 100%; 
 
    width: 200px; 
 
}

<div id="container"> 
 
    <div id="A">A</div> 
 
    <div id="B">B</div> 
 
    <div id="C">C</div> 
 
</div>

答

不幸的是，没有固定的高度，所以我结束了做事的老办法 - 通过表格，这样

HTML：

<div id="container"> 
    <div id="A">A<br>AAA<br>BBB</div> 
    <div id="B">B</div> 
    <div id="C">C</div> 
</div>

CSS ：

#container { 
    width: 100%; 
    outline: 1px solid black; 
    display: table; 
} 

#A,#B,#C { 
    outline: 1px solid crimson; 
} 

#A,#B { 
    width: 100%; 
} 

#C { 
    display: table-cell; 
    vertical-align: middle; 
    width: 50%; 
}

柔性箱布局，左侧两个项目，右侧一个

相关推荐