html - 如何在同一行的主要 div 之后留下次要 div？

Question

我正在缩放几个 div，其中一个在宽度和高度上大于其他 div，在此之后的其他 div 太低，未在同一行上对齐。

注意：在整页执行下面的代码，遵循代码：

body {
    background-color: #2E5173;
}

div {
    border-radius: 10px;
    background-color: white;
    margin: 10px;
    width: 240px;
    height: 250px;
    display: inline-block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

.big {
    width: 508px;
    height: 508px;
}

<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="">&nbsp;</div>
	<div class="big">&nbsp;</div>
	<div class="">this div is very low</div>
	<div class="">this div is very low</div>

上面的代码如下所示：

我需要它看起来像这样：

任何人都可以帮忙吗？

标签： htmlcss

Answer 1

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

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,240px); /* The width */
  grid-auto-rows:250px; /* The height */
  grid-auto-flow:dense; /*This is the important property*/
  /* The margin */
  grid-gap:20px;
  padding:10px;
}
.container div {
  border-radius: 10px;
  background-color: #2E5173;
}

.big {
  grid-column:span 2; /* Take twice the width*/
  grid-row:span 2; /* Take twice the height*/
}

<div class="container">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div class="big">&nbsp;</div>
  <div>this div is very low</div>
  <div>this div is very low</div>
</div>