html - html中元素的排列

问题描述

是否可以使用 html + css 来实现这种结构？

但我不想在橙色块之间有垂直空间，而是想成为另一个顶部的一个。

我已经使用了 flex 和 grid 但到目前为止还没有真正成功:(

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
  width: calc(60% - 22px);
  padding: 10px;
  background: lime;
  height: 100px;
  margin-bottom: 10px;
}

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

标签： htmlcssflexboxcss-grid

您可以使用 CSS 网格布局轻松做到这一点：

你可以使用grid-template-columns: 3fr 2fr;，因为你有 60% 到 40% 的比例big和small元素，
行高可以使用grid-auto-rows: 100px,
可以使用grid-row-gap属性设置行之间的边距，
现在将设置big为始终占用第一列grid-column: 1，使用设置为始终占用第二列small。

到目前为止的配置请参见下面的演示：

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1;
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

现在只需添加grid-auto-flow: dense以将橙色块拉到顶部 - 请参见下面的演示：

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr; /* two columns */
  grid-auto-rows: 100px; /* row height */
  grid-row-gap: 10px; /* gap between rows */
  grid-auto-flow: dense; /* added */
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1; /* in first column */
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2; /* in second column */
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

html - html中元素的排列

问题描述

解决方案

推荐阅读