填充父容器时使正方形在网格中浮动的CSS技术'；s宽度

所以我有一个显示产品的页面，我正在尝试将该页面从基于表格的布局转换为某种动态网格，其中每个点是一个表格单元格，三个为一行。 不幸的是，使用内联块是一个痛苦的问题，因为“保持空白就像它在内联块之间的重要性”的问题，而使用浮动是。。。可以，但往往会导致列表中出现空白（请参见附图）。

瓷砖有一个最大宽度和最小宽度，所以看起来瀑布或pinterest类型的瓷砖应该没有必要，因为我并没有真正处理可变高度和宽度的矩形

那么，什么技术最适合使这种网格列表定期填充可用空间，但仍然允许行变短以获得更短的屏幕呢

---

这里有一个问题页面的开发中示例：

该技术称为液体设计，或者如果您必须支持智能手机和平板电脑，那么它将是“响应式设计”

在您的场景中，首先需要将固定宽度的表格转换为液体网格。代码片段包括：

CSS:

       * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}


.container {
    width: auto;
}

    .container:after {
        content: " ";
        clear: both;
        display: table;
    }


.tabletContainer {
    /*The total width for the first two column*/
    width: 67%;
    float: left;
    display: block;
}



.left {
    background-color: red;
    float: left;
    /*Each column takes have of the container size, so their width =67/2 = 33.5%*/
    width: 50%;
}

.middle {
    background-color: yellow;
    float: right;
    /*Each column takes have of the container size, so their width =67/2 = 33.5%*/
    width: 50%;
}

.right {
    float: right;
    width: 33%;
    background-color: blue;
}

/*For tablet devices, show only the two columns in a row and a column underneath*/

@media (min-width: 481px) and (max-width: 768px) {
    .tabletContainer, .right {
        float: none;
        width: auto;
    }

  .right
  {
      clear: both;
      width: 50%;
  }
}


/*For mobile phones, show only one column*/
@media (max-width: 480px) {
   .tabletContainer, .left, .right, .middle {
        float: none;
        width: auto;
       display: block;
    }




}

HTML

<div class="container">
        <div class="tabletContainer">


            <div class="left">It is well enough that people of the nation do not understand our banking and monetary system, for if they did, I believe there would be a revolution before tomorrow morning.
            </div>
            <div class="middle">Under capitalism, man exploits man. Under communism, it's just the opposite.
            </div>

        </div>
        <div class="right">One of the funny things about the stock market is that every time one person buys, another sells, and both think they are astute
        </div>
    </div>

<img src="imgs/clouds.jpg" alt="Clouds" class="half right"/>

HTML

<div class="container">
        <div class="tabletContainer">


            <div class="left">It is well enough that people of the nation do not understand our banking and monetary system, for if they did, I believe there would be a revolution before tomorrow morning.
            </div>
            <div class="middle">Under capitalism, man exploits man. Under communism, it's just the opposite.
            </div>

        </div>
        <div class="right">One of the funny things about the stock market is that every time one person buys, another sells, and both think they are astute
        </div>
    </div>

<img src="imgs/clouds.jpg" alt="Clouds" class="half right"/>

如果要将其浮动到容器的左侧：

img.left {
    float: left;
    margin: 0 10px 10px 0;
}

通过应用填充/边距，您可以达到想要的效果

希望这有帮助