在左侧和右侧分别放置两个项目 [英] flexbox layout with two items on the left and one on the right

问题描述

我正试图用flexbox实现以下布局。

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

如果没有将A和B包装到包装中，是否可以这样做？解析方案

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

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％; 
大纲：1px纯黑色; 
 display：table; 
} 
 
＃A，＃B，＃C {
概要：1px实心深红色; 
} 
 
＃A，＃B {
 width：100％; 
} 
 
 #C {
 display：table-cell; 
 vertical-align：middle; 
宽度：50％; 
} 
  

I am trying to achieve the following layout with flexbox.

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

Is it possible to do so without wrapping A and B into a wrapper?

解决方案

unfortunately, there is no fixed height, so I ended up with doing things old way — via tables, like this

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

这篇关于在左侧和右侧分别放置两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！