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

通過應用填充/利潤率可以達到你想要的效果。

希望得到這個幫助。