CSS 两列 100% 宽度和相同的高度（正方形）

Question

您好，我正在尝试创建一个带有两列方形元素的 gridview（相同宽度相同高度，高度取决于屏幕宽度）。这是一个工作示例，但两列不覆盖所有宽度.知道怎么做吗？

.container{
    display: inline-block;
    width: 100%;
    background-color: #0ff;
}

box {
    background:pink;
    margin:2px;
    float:left;
    width:40vw;
    height: 40vw;
}

<div class="container">
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
</div>

Answer 1

您 box 的 CSS 已根据您的要求更改

.container{
    display: inline-block;
    width: 100%;
    background-color: #0ff;
}

box {
    background:pink;
    margin:1px;
    float:left;
    
    height: 40vw;
    width: calc(50% - 2px);
}

<div class="container">
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
</div>

注意：这里你使用 float : left 所以右边 space 比左边大 space。

Answer 2

当您使用 width: 40vw; 时，它们占 window 宽度的 40%，即每行 80%，因此预计会留下另外 20% 的空白。

你需要的是使用一个 width: 50%; 来制作 2 个盒子将填满 100%，但是因为它们也有一个 margin: 2px，所以你可能需要从 50% 中减去 4px（margin-left 减去 2px，margin-right 减去 2px）。所以这应该是 width: calc(50% - 4px); 并且除了在高度上使用视点单位 vw 之外，我建议你可以使用 padding-bottom: calc(50% - 4px); 这将使盒子的高度与其宽度相同：

box {
    background:pink;
    margin:2px;
    float:left;
    width: calc(50% - 4px);
    padding-bottom: calc(50% - 4px)
}

工作 JsFiddle：https://jsfiddle.net/v8bdmLse/

Answer 3

您可以在“%”中定义宽度

  

  .container{
    display: inline-block;
    width: 100%;
    background-color: #0ff;
}

box {
    background:pink;
    margin:1%;
    float:left;
    width:48%;
    height: 40vw;
}

    <div class="container">
      <box></box>
      <box></box>
      <box></box>
      <box></box>
      <box></box>
      <box></box>
      <box></box>
      <box></box>
    </div>

CSS 两列 100% 宽度和相同的高度（正方形）

CSS two columns 100% width with same height (a square)

html

css

height

width

multiple-columns