将<div>拆分为两个水平对齐的<div>,而整体在另一个<div>上垂直对齐

Question

这段代码:

#content {
  width: 100%;
  vertical-align: top;
}
#primo {
  *display: inline-block;
  width: 100%;
  background-color: #aaaaff;
  vertical-align: top;
}
#secondo {
  *display: inline-block;
  width: 100%;
  background-color: green;
  vertical-align: top;
}

<div id="content">
  <div id="primo">
    some content
    <br />some content
    <br />some content
    <br />
  </div>

  <div id="secondo">
    some
    <br />content
    <br />some
    <br />content
    <br />some
    <br />content
    <br />
  </div>
</div>

呈现为两个<div>垂直对齐,一个在另一个的顶部,绘制两个不同的文本.

我想将top-div分成两个<div>水平对齐的子区域(另外两个子区域),以便在这两个不同的文本中进行绘图.

怎么做到这一点？

这就像创建一个双行矩阵,其第一行有两列,第二行只有一列跨越整个宽度.

编辑 我想学习做这样的模拟的基本代码:

Answer 1

不确定我是否正确理解了您的问题,但是您想要创建这种布局(请参阅代码段)？

编辑:现在编辑代码相同的布局,但在div中完成.如果这是你想要的东西,我建议你看看Flexbox布局,这是一个很好的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑2:刚刚看到你的模拟图片,它可以使用Flexbox布局实现,但你需要调整很多像素/百分比/数字来获得你想要的确切布局,请参阅第二个片段中的示例.

.container {
    width: 200px;
}
.flex {
    display: flex;
}
.sameRow {
    border: 2px solid black;
    height: 40px;
    width: 100%;
}
.normal {
    height: 40px;
    border: 2px solid red;
}

<div class="container">
    <div class="flex">
        <div class="sameRow">Content</div>
        <div class="sameRow">Content</div>
    </div>
    <div class="flex">
        <div class="sameRow">Content</div>
        <div class="sameRow">Content</div>
    </div>
    <div>
        <div class="normal">Content</div>
        <div class="normal">Content</div>
    </div>
</div>

.container {
    width: 200px;
}
.flex {
    display: flex;
    flex-wrap: wrap;
}
.flexColumn {
    flex-direction: column; 
}
.block {
    border: 2px solid black;
    height: 40px;
    width: 20px;
}
.a0 {
    width: 80%;
    background: red;
}
.a1 {
    height: 84px;
}
.a2 {
    height: 50px;
    background: green;
}
.a3 {
    height: 30px;
    background: blue;
}
.a4 {
    width: 112px;
}
.a5 {
    height: 18px;
    background: orange;
}

<div class="container">
    <div class="flex">
        <div class="block a0 a1"></div>
        <div class="flexColumn">
            <div class="block a2"></div>
            <div class="block a3"></div>
        </div>
        <div class="block "></div>
        <div class="block a4"></div>
        <div class="flexColumn">
            <div class="block a5"></div>
            <div class="block a5"></div>
        </div>
        <div class="block"></div>
    </div> 
</div>