html - 将一个<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/

EDIT2: 刚刚看到您的模拟图片，它可以使用 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>