自動調整背景顏色以覆蓋整個容器

我需要響應地在塊容器中顯示多個圖像，如何在屏幕尺寸變窄時自動調整並使用特定顏色填充整個容器。下面是HTML和CSS的源代碼，演示可以從http://jsfiddle.net/yckelvin/54v27shp/查看。只有前幾行填充了背景顏色，我怎麼填寫其餘的。自動調整背景顏色以覆蓋整個容器

<div id="container">Smile Smile 
    <ul> 
     <li> 
      <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png"> 
     </li> 
     <li> 
      <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png"> 
     </li> 
     { rest content omitted } 
    </ul> 
</div> 
<div id="container">Footer Footer</div>

CSS

#container { 
    background-color: rgba(0, 255, 0, 0.2); 
    width:calc(100%); 
    height: 100%; 
    display: block; 
} 

img { 
    width: 100px; 
} 

li { 
    display: table-cell; 
    float: left; 
    padding: 10px; 
}

來源

2014-10-02 Kelvin

的問題是，你不清除你的li標記你的花車。解決這個問題的一種方法是將clearfix代碼片段添加到#container中。

#container:after { 
    content: " "; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

你可以閱讀更多的 - What is a clearfix?

而且你可以在這裏檢查工作的代碼 - http://jsfiddle.net/54v27shp/3/

來源

2014-10-02 07:44:42 siropo

不僅提供了快速修復和建議附加信息，還推薦閱讀http://css-tricks.com/all-about-floats/ – Kelvin 2014-10-02 08:46:05

JS Fiddle

的</ul>收盤後增加一個明確的div問題是因爲浮動留給<li>

.clear{ 
    clear:both; 
} 

<div class="clear"></div>

來源

2014-10-02 07:35:45

您可以添加overflow:hidden到您的container。

#container { 
    background-color: rgba(0, 255, 0, 0.2); 
    width:calc(100%); 
    height: 100%; 
    overflow:hidden; 
}

，或者設置container到table或inline-block

#container { 
    background-color: rgba(0, 255, 0, 0.2); 
    width:calc(100%); 
    height: 100%; 
    display:table; // display: inline-block; 
}

來源

2014-10-02 07:36:39 TeeDeJee

添加溢出：隱藏到父元素，保證母塊覆蓋的所有元素。 – Kelvin 2014-10-02 08:48:14

的顯示添加display: inline-block;到#container

的jsfiddle - DEMO

#container { 
    background-color: rgba(0, 255, 0, 0.2); 
    width:calc(100%); 
    height: 100%; 
    display: inline-block; /* or float: left; */ 
}

OR：

添加display:inline-block;到li和li

的jsfiddle刪除display:table-cell;和float:left; - DEMO

li { 
    display: inline-block; 
    padding: 10px; 
}

來源

2014-10-02 07:37:22 Anonymous

的問題，你遇到的是因爲#container的內容漂浮。

您的最終UL標籤後插入下面的代碼：

<div style="clear:both;"></div>

使結果：

<ul> 
    <li> 
     <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png"> 
    </li> 
    <li> 
     <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png"> 
    </li> 
    { rest content omitted } 
</ul> 
<div style="clear:both;"></div>

來源

2014-10-02 07:38:30

自動調整背景顏色以覆蓋整個容器

回答

相關問題