Question

我有一个小问题。我正在尝试使用 HTML 和 CSS 编写这样的布局：

我看了这个问题： Flexbox 3 divs, two columns, one with two rows。唯一的问题是你不能在不破坏布局的情况下给 div 留边距。

如果左边的图像更高，那么右边的两个图像应该使用剩余的空间。（只有几个盒子是我先尝试正确放置的。我想私下做造型，所以不要奇怪。）

这是我迄今为止尝试过的代码（按整页。在这个小窗口中，您只能看到移动版本）：

K:\DBScripts>PUSHD \\SERVER_NAME\M$\MSSQL

W:\MSSQL>FORFILES /P Backup /s /d -8 /C "cmd /c dir /A-D /B @file" 1>K:\ScriptLogs\OutPut
File Not Found
File Not Found

W:\MSSQL>POPD

* {
  margin: 0;
  padding: 0;
}

#showroom {
  height: 500px;
  width: 100%;
  background: red; /* To see showroom Background */
  padding: 1em;
  display: flex;
}

#boxOne {
  height: 100%;
  width: 50%;
  background: grey;
  margin: 10px;
  float: left;
}

#showroom #boxTwo {
  width: 50%;
  height: 50%;
  background: grey;
  margin: 10px;
}

#showroom #boxThree {
  width: 50%;
  height: 50%;
  background: grey;
  margin: 10px;
}

@media only screen and (max-width: 750px) {
  #showroom {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  #showroom #boxOne, #showroom #boxTwo, #showroom #boxThree {
    height: 33.3%;
    width: 100%;
  }
}

Answer 1

更新

为了使 #boxOne 更宽，我们应该查看父网格，我们说它有 3 列宽，每列代表 120px。

现在让我们看一下 #boxOne，并捕获/修复我引入的错误。

#boxOne {
  grid-column: 1; /* Oops—this is wrong */
  grid-row: 1 / 3;
}

我们将网格声明为 3 列，但 #boxOne 仅跨越一列。其他框也跨越一列。这是我们的网格现在的样子。

您可以看到我们甚至没有使用第三列。让我们调整 #boxOne 使其跨度是其他框的两倍。一个非常重要的细节是从第一条垂直线开始计数。想想这样的列：

现在应该清楚我们需要做什么了。

#boxOne {
  grid-column: 1 / 3;
  …
}

我们将放置在 #boxOne 离开的 span 位置的其他框。

#boxTwo {
  grid-column: 3;
  …
}

#boxThree {
  grid-column: 3;
  …
}

现在事情看起来像我们想要的那样。

我会使用 CSS Grid 来解决这个问题。在您的示例中，图像将隐式占用必要的空间，您不需要在声明 px 的行中使用 grid-template-columns 值。在您的情况下，您可以将 120px 替换为 1fr，后者是 CSS 网格使用的小数单位。

使用 CSS Grid 的另一个优点是您可以避免大量额外的 width 和 height 设置，以及为项目之间的间隙使用边距。

#showroom {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  gap: 1rem;
}

#boxOne {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

#boxTwo {
  grid-column: 3;
  grid-row: 1 / 2;
}

#boxThree {
  grid-column: 3;
  grid-row: 2 / 3;
}

#showroom > * {
  background-color: #444;
  padding: 20px;
  border-radius: 5px;
}

<div id="showroom">
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
  <div id="boxThree"></div>
</div>

左侧一个 div，右侧两个 div

1 个答案: