Question

重新创建了该问题

我有一个背景div，它是100％宽，200像素高，最小宽度为600像素。在里面我有五个漂浮的div。

当布局的宽度发生变化时，是否可以扩展背景div的宽度以覆盖浮动的div？

任何帮助都会非常感激！

#stripe {
height: 200px;
width: 100%;
min-width:600px;
text-align: center;
position: relative;
background-image: url(http://signaturewebdesign.net/egro14/14_images/brown_stripe_bg.png);
background-repeat: repeat;
}
.holder {
float: left;
height: 200px;
width: 125px;
display: inline-block;
padding-right: 13px;
padding-left: 12px;
margin: auto;
}

Answer 1

如果您希望在项目占用多行时更改高度，则可以添加overflow:hidden并将height设置为auto以获得#stripe样式：

#stripe {
  height: auto;
  width: 100%;
  min-width:600px;
  text-align: center;
  position: relative;
  background-image: url(http://signaturewebdesign.net/egro14/14_images/brown_stripe_bg.png);
  background-repeat: repeat;
  overflow:hidden;
}

jsfiddle

Answer 2

尝试这样的事情：

http://jsfiddle.net/Dx5d8/6/

.holder { width:15%;}
.holder img { max-width:100%; width:100% height:100;}

您可以使用任意大小的布局，以正确的宽高比完全显示图像。

使css在不同尺寸下更具流动性

2 个答案: