Question

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

.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);来创建框＃39}。高度与宽度相同：

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

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

Answer 2

@import的CSS会根据您的要求进行更改

＆＃13;

box

＆＃13;

.container{
    display: inline-block;
    width: 100%;
    background-color: #0ff;
}

box {
    background:pink;
    margin:1px;
    float:left;
    
    height: 40vw;
    width: calc(50% - 2px);
}

＆＃13;

注意：在这里使用<div class="container"> <box></box> <box></box> <box></box> <box></box> <box></box> <box></box> <box></box> <box></box> </div>，因此与左侧相比，右侧有更大的空间。

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％宽度，高度相同（方形）

3 个答案: