CSS 两列 100% 宽度和相同高度（一个正方形）答案

【问题标题】：CSS two columns 100% width with same height (a square)CSS 两列 100% 宽度和相同高度（一个正方形）
【发布时间】：2016-09-13 15:14:10
【问题描述】：

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

.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>

【问题讨论】：

标签： html css height width multiple-columns

【解决方案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/

【讨论】：

谢谢，我还有一个问题，如何在里面设置？我试过这个 w.....74.jpg"></box> 但不工作
可以通过background-image实现吗？
不，我需要像里面的可能吗？我想创建类似于画廊的东西
将position: relative; 分配给box 和position: absolute; 分配给box img 应该没问题，看看这个演示：jsfiddle.net/v8bdmLse/1

【解决方案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，所以右侧比左侧空间更大。

【讨论】：

Eeer...这里的框也没有覆盖所有的水平空间。你所做的只是让它们覆盖得更多；我不确定这如何解决 OP 的问题。

【解决方案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>

【讨论】：