響應網格填充圖片問題

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
img { 
 
    height: auto; 
 
    max-width: 100%; 
 
} 
 
.container { 
 
    width: 100%; 
 
} 
 
.third { 
 
    float: left; 
 
    width: 33.334%; 
 
    padding-right: 24px; 
 
} 
 
.last { 
 
    padding-right: 0; 
 
} 
 
.clearfix:before, 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both 
 
}

<div class="container clearfix"> 
 
    <article class="third"> 
 
    <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" /> 
 
    <h1>Title</h1> 
 
    <p>Description</p> 
 
    </article> 
 
    <article class="third"> 
 
    <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" /> 
 
    <h1>Title</h1> 
 
    <p>Description</p> 
 
    </article> 
 
    <article class="third last"> 
 
    <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" /> 
 
    <h1>Title</h1> 
 
    <p>Description</p> 
 
    </article> 
 
</div>

的3列我的容器內平均坐，但的高度最後的形象比其他的要大。我知道這是因爲第三列沒有填充。

是否有解決方案來均衡圖像高度，同時保持3等寬？我已經在圖片上試過max-width，但這會在第三列的右側添加24像素的空白。

來源

2014-12-05 Squideyes

這將是anwser容易得多如果你設法重現你的問題在小提琴或其他。 – 2014-12-05 09:44:46

謝謝你，我已經在我編輯的問題中提供了一個鏈接:) – Squideyes 2014-12-05 10:05:42

因爲你的圖像被設置爲100％的區域，並且你沒有填充，它會抓取你的'.last'容器的填充寬度，確實比其他人大。考慮給它一個填充，或者至少有一個「填充左邊」或「填充右邊」來排列你想要的內容 – Dorvalla 2014-12-05 10:10:53

我會建議留在最後一個項目的填充和容器上使用負右頁邊距：

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
img { 
 
    height: auto; 
 
    max-width: 100%; 
 
} 
 
.container { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.wrap { 
 
    margin-right: -24px; 
 
} 
 
.third { 
 
    float: left; 
 
    width: 33.334%; 
 
    padding-right: 24px; 
 
} 
 
.clearfix:before, 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.clearfix:after { 
 
    clear: both 
 
}

<div class="container clearfix"> 
 
    <div class="wrap"> 
 
    <article class="third"> 
 
     <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" /> 
 
     <h1>Title</h1> 
 

 
     <p>Description</p> 
 
    </article> 
 
    <article class="third"> 
 
     <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" /> 
 
     <h1>Title</h1> 
 

 
     <p>Description</p> 
 
    </article> 
 
    <article class="third last"> 
 
     <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" /> 
 
     <h1>Title</h1> 
 

 
     <p>Description</p> 
 
    </article> 
 
    </div> 
 
</div>

參考：grid with inner padding only

來源

2014-12-05 10:48:07

響應網格填充圖片問題

回答

相關問題