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

Question

所以我有一个用于展示产品的页面，我正在尝试将该页面从基于表格的布局(其中每个点都是一个表格单元格，三个为一行)转换为某种动态网格。不幸的是，由于“保留内联 block 之间很重要的空白”问题，使用内联 block 很痛苦，使用 float 是......好吧，但往往会导致列表中出现空白(见附图)。

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

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

这里有一个开发中的问题页面示例:http://www.shermanbrothers.com/catalog.php

Answer 1

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

在您的场景中，首先您需要将固定宽度的表格变成液体网格。代码片段是:

JsFiddle

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>

1. 您还需要使图像流畅。一种技巧是删除图像的固定宽度和高度。

CSS

/*Make images not resize outside of the column that they are in*/
img {
    max-width: 100%;    
}

HTML

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

您还可以使用 % 更改图像大小。例如，上例中的图像宽度将使用以下 CSS 设置为容器宽度的 50%。

img.half {
    max-width: 50%; 
}

如果要将其 float 到容器的左侧:

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

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

希望这对您有所帮助。