css - 当浮动属性设置为“无”时，CSS背景图像消失

Question

我有一系列三个盒子，每个盒子大约是屏幕宽度的三分之一。前两个框的宽度为 33.333%，向左浮动。我已经删除了第三个盒子上的浮动并将宽度设置为，auto以便它填充剩余的水平空间。但是，这样做会导致背景图像消失。我创建了一个Fiddle来展示这种效果。

HTML 非常简单：

<div></div>
<div></div>
<div></div>

这是CSS：

div {
  float: left;
  width: 33.333%;
  height: 120px;
  background: #EEE url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/200px-Approve_icon.svg.png') no-repeat center center;
  background-size: 100px 100px;
}

div:nth-child(2) {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

div:nth-child(3) {
 float: none;
 width: auto;
}

有任何想法吗？

Answer 1

用于overflow: hidden解决此问题：

div:nth-child(3) {
    float: none;
    width: auto;
    overflow: hidden;
}

你没有得到它的原因是，当你给它时，他们肯定会因为一个ed 元素而width: auto失去他们的 s 。widthfloat

小提琴：http: //jsfiddle.net/praveenscience/aMwk9/1/

Answer 2

您需要添加overflow: hidden：

div:nth-child(3) {
 float: none;
 width: auto;
 overflow: hidden;
}

如果没有这个指令，第 3 个 DIV 不会填充剩余空间，但也会与 DIV 的其余部分重叠。