如何定位两个文本块，其中一个块由两个块组成？

Question

这里，红色和黑色是两个文本块，宽度与蓝色相同，但两个块的高度与蓝色相同。 目前，我有。

Answer 1

这是一种使用嵌套flexbox layout的现代方法。不幸的是，它需要一些额外的标记（容器div），但在宽度和高度方面非常灵活，这是很难用其他方法实现的。您需要使用flex值（flex-grow，flex-shrink，flex-base）来获得所需的结果。它的行为非常像表格单元格。

围绕flexbox的一个很好的起点是this nice overview。黑色容器上的高度只是为了演示，元素可以很好地扩展到您想要的每个尺寸。请注意，尽管没有声明高度，右侧会扩展到相同的大小。

＆＃13;

＆＃13;

div{padding:5px;}

#container{
  border:1px solid red;
  display:flex;
  align-items:stretch;
}
#container > div{
   flex:1 1 auto;  
}
#left{
  display:flex;
  flex-direction:column;
  border:1px solid blue;
}
#left > div{
   flex:1 1 auto;   
}
#red{background-color:red;}
#black{background-color:black;color:white;height:100px;}
#right{
   background:#aaf;
}

＆＃13;

<div id="container">
  <div id="left">
    <div id="red">
    red container
    </div>
    <div id="black">
      black container
      
    </div>
  </div>
  
  <div id="right">
    right
    <br>
    side
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你正在寻找像我创建的HERE这样的例子。

<强> HTML：

<div class="two">
   <div id="red">red div</div>
   <div id="black">black div</div>
</div>
<div class="one">
   <div id="blue">blue div</div>
</div>

<强> CSS：

* {box-sizing:border-box;}
.two {
   width: 48%;
   margin: 0 1%;
   float: left;
}
.one {
   width: 48%;
   float: left;
}
#red {
   background: red;
   height: 30px;
   margin-bottom: 2px;
   border: 1px solid black;
   color: white;
   overflow: auto;
}
#black {
   background: black;
   height: 30px;
   border: 1px solid black;
   color: white;
   overflow: auto;
}
#blue {
  background: #CFE2F3;
  height: 62px;
  border: 1px solid black;
}

在此示例中，红色和黑色文本框具有相同的高度和宽度，但它们位于彼此的顶部。蓝色框与前两个框具有相同的宽度，但其高度是红色框的高度的两倍。