CSS技术使填充父容器宽度的方格浮动在网格中

Question

因此，我有一个显示产品的页面，我试图从基于表格的布局转换该页面，其中每个点是表格单元格，三连胜，成为某种动态网格。 不幸的是，使用内联块是由于“在内联块之间保留空白像是很重要”的问题，并且使用浮动是...好，但往往会导致列表中的空隙（见附图）。

瓷砖有一个最大和最小宽度，所以它看起来像瀑布或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%; 
} 

如果你想它浮在容器的左边：

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

通过应用填充/利润率可以达到你想要的效果。

希望得到这个帮助。