Question

我需要响应地在块容器中显示多个图像，当屏幕尺寸变窄时，如何自动调整并用特定颜色填充整个容器。下面是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;
}

Answer 1

问题是您没有清除li标签上的浮动广告。解决这个问题的一种方法是将clearfix片段添加到#container。

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

您可以在 - What is a clearfix?

了解更多信息

您可以在此处查看工作代码 - http://jsfiddle.net/54v27shp/3/

Answer 2

您可以将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;
}

Answer 3

将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; */
}

或

将display:inline-block;添加到li并从display:table-cell;
中删除float:left;和li
JSFiddle - DEMO

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

Answer 4

JS Fiddle

在</ul>关闭后添加一个明确的div，问题是由于<li>的剩余浮动

.clear{
  clear:both;
}

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

Answer 5

您遇到的问题是因为#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>

自动调整背景颜色以覆盖整个容器

5 个答案: