Question

所以我有一个用于显示产品的页面，我正在尝试将该页面从基于表格的布局转换为每个点是一个表格单元格，三个到一行，进入某种动态网格。不幸的是，使用内联块是一种痛苦，因为“在内联块之间保持像空格一样重要”问题，并且使用浮点数是......好的，但往往导致列表中的间隙（参见附图）。 floats are a problem

瓷砖具有最大和最小宽度，因此看起来像瀑布或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>

您还需要使图像也具有液体效果。一个技巧是删除图像的固定宽度和高度。

<强> 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%; 
}

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

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

通过应用填充/边距，您可以获得所需的效果。

希望得到这个帮助。

CSS技术使广场在网格中浮动，同时填充父容器的宽度

1 个答案: