具有固定像素間距的流體網格佈局

在以下嘗試在單元之間具有固定間距的「流體」網格佈局時，任何人都可以解釋爲什麼當容器寬度變化時，左下方圖像上方的間距不同。例子如下。具有固定像素間距的流體網格佈局

問題：

爲什麼會出現這種情況？我沒有說明什麼？
或 /和你可以建議一個更好的方式來實現這樣一個與CSS網格？圖片必須保持比例，它應該與IE8一起使用。

隨着〜200像素寬度：
width ~200px

和〜1120px寬度（裁剪）：
width ~1120px

HTML：

<div class="container"> 
    <div class="col1"><img src="http://placekitten.com/200/200"/></div> 
    <div class="col2"><img src="http://placekitten.com/200/200"/></div> 
    <div class="col3"> 
     <img src="http://placekitten.com/200/200"/> 
     <img src="http://placekitten.com/285/678"/> 
    </div> 
    <div class="col4"><img src="http://placekitten.com/875/532"/></div> 
</div>

CSS：

.container{  
    outline: 2px solid #000; 
    margin: 30px auto; 

    overflow: auto; 
    font-size: 0; 
    position: relative; 

    padding-left: 20px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
img{ 
    width: 100%; 
} 

.col1, .col2, .col3{ 
    width: 37.5%; 
    float: left; 
} 

.col1{ 
    margin-left: -20px; 
} 
.col1, .col2{ 
    margin-right: 10px; 
} 

.col3{ 
    width: 25%; 
} 
.col3 img:first-child{ 
    margin-bottom: 10px; 
} 

.col4{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 75%; 
    padding-right: 5px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

來源

2013-08-06 Qtax

您的左下角圖像位於絕對底部：0; left：0;所以它和它上面的圖片之間的間距僅取決於該左下圖像的寬高比。換句話說，如果你想縮小這個空間，你需要增加圖像的高度。

來源

2013-08-06 19:35:37 andi

不，不僅。它還取決於「決定」容器高度和它們之間間距的圖像的高寬比。所以這並不能回答任何問題。 – Qtax

基本上，你不應該在這裏有任何絕對的定位。我通常不提倡桌子，但也許桌子佈局會給你更好的結果。然後你可以設置細胞間距。 – andi

*「它與上面的圖片之間的間距僅取決於左下圖像的寬高比」*，您是否可以通過更改該圖片的寬高比來說明這一點，以便間距始終保持不變？如果不是那麼這個陳述是錯誤的（在另一方面）。表格可能有效，但我不再100％確定。也許在這裏沒有東西加起來，這就是爲什麼我們有分歧。 – Qtax

具有固定像素間距的流體網格佈局

回答

相關問題