HTML CSS布局在页面下推送元素

Question

我有这个HTML

tsintermittent

我正在尝试创建此布局

1,3和3设置为显示块和宽度为33％。 4设置为内联块和宽度为60％

布局按照我想要的方式显示，但是当我将内容添加到4时，它会向页面推送1,2和3，因此它不是顶部对齐的。

非常感谢任何帮助

Answer 1

将vertical-align: top;添加到.four

原因：内联块默认（垂直）沿着它们的基线对齐，这是最低的文本行，如果是任何文本 - 这会改变这种行为。

Answer 2

像往常一样，Flexbox是我们的主人和救世主。这是您使用Flex制作的布局。

＆＃13;

＆＃13;

.container {
  width: 500px;
  height: 250px;
  display: flex;
  border: #00f solid 2px;
}

.container .side {
  border: #ff0 dashed 3px;
  flex-basis: 33%;
  flex-shrink: 0; /* Prevents shrinking if .four grows */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensures perfect spacing of the elements on the left */
}

.container .side div {
  background: #008000;
  width: 100%;
  height: 30%;
}

.container .four {
  border: #f00 solid 3px;
  flex-grow: 1; /* Take remaining space */
}

＆＃13;

<div class="container">
  <div class="side">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <div class="four"></div>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将1,2和3包裹在另一个div中，然后而不是inline-block使其成为

display: block;
float: left;