CSS两列100%宽相同高(一个正方形)

Question

嗨，我试图创建一个gridview与两列的方形元素(相同的宽度相同的高度dinanicalical，高度取决于屏幕的宽度)。这是一个工作的例子，但两列不覆盖所有的宽度。知道怎么做吗?

.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

当您使用width: 40vw;时，它们占用窗口宽度的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 2

根据您的要求更改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，所以右边的空间比左边大。

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>