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

两个不同的文本会被渲染为两个垂直对齐的

，位于另一个

的顶部。

我想把顶部的

分成两个子区域(两个进一步的子

)，水平对齐，在这两个不同的文本中绘制。

如何实现这一点？

就像创建一个两行矩阵一样，第一行有两列，第二行只有一列跨越整个宽度。

编辑 我想学习做这种模型的基本代码：

- Leonardo

---

你能否创建一个所需输出的模拟版本？ - m4n0

Answer 1

不确定我是否正确理解了您的问题，但您想创建的是这种布局吗（请参阅代码片段）？

编辑：现在已经编辑了代码，使用divs完成相同的布局。如果您想要这种类型的东西，我建议您查看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>

- zenoh

---

好的答案，但是我需要仅使用<div>元素来实现相同的结果。 - Leonardo

Answer 2

你可以使用左浮动和右浮动。

我认为这就是你想要的。检查一下：

`http://jsfiddle.net/ss7e0aso/`

- Rosenan