獲取圖像以適合白色盒子，而不是漂浮在白色盒子外

如何才能將圖庫頁面上的圖像放入白色盒子？獲取圖像以適合白色盒子，而不是漂浮在白色盒子外

的jsfiddle這裏：http://jsfiddle.net/uuLk4uyq/

HTML

<section class="mainSection" style="width: 100%"> 
    <h1>Gallery</h1> 
    <article class="content"> 
     <h2>Gallery</h2> 
     <ul class="photos"> 
      <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li> 
      <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li> 
      <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li> 
     </ul> 
    </article> 
</section>

來源

2014-11-02 methuselah

添加

overflow: hidden;

上

.content

放ŧ他將您的畫廊頁面上的圖像放入白色框中。

overflow: hidden;可能會出現一些問題。就像該div之外的項目被隱藏或切斷一樣。

Alternativally，你可以沿着最後li之後添加<div class="clear"></div>：

.clear{ 
    clear:both 
}

見JSFiddle

一個更好的解決辦法是在.content添加.clearfix。你不需要額外的標記。

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

見JSFiddle

什麼是clearfix？

來源

2014-11-02 00:29:11

尼斯一個與「溢出：隱藏」。這是如何運作的？沒有把我當作邏輯解決方案。 – JimmyRare 2014-11-02 00:33:52

@JimmyRare我不知道爲什麼。我知道這工作！找到一個解釋這裏http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – 2014-11-02 00:49:18

另一種方法是添加顯示：上。內容

來源

2014-11-02 01:27:34

inline-block的如果你想在你的圖像伸展白部分：

.content { 
    background-color:#FFF; 
    border-radius: 10px; 
    -webkit-border-radius: 10px; 
    padding: 3% 5%; 
    margin-top: 2%; 
    height: auto; 
    overflow: auto; 
}

來源

2014-11-03 08:48:43

不要忘記upvote我... XD – 2014-11-03 08:49:42

獲取圖像以適合白色盒子，而不是漂浮在白色盒子外

回答

相關問題