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;
}

你没有得到它的原因是，当你提供width: auto时，他们肯定会因width ed元素丢失float。

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

Answer 2

您需要添加overflow: hidden：

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

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

当float属性设置为'none'时，CSS背景图像消失

2 个答案:

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