css - 使 CSS 在不同尺寸下更流畅

标签 css html stretch

我在 http://jsfiddle.net/Dx5d8/ 重现了这个问题

我有一个 100% 宽和 200 像素高的背景 div,最小宽度为 600 像素。我在里面有五个 float 的 div。

是否可以随着布局宽度的变化,扩展背景 div 的宽度以覆盖 float 的 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;
}

最佳答案

如果您希望当元素占据多于一行时改变高度,您可以添加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

关于css - 使 CSS 在不同尺寸下更流畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20025655/

相关文章:

css - 对于 WIDTH 属性的 'max-content' 和 'fit-content' 值,CSS3 存在浏览器兼容性问题

javascript - 现在呈现的 JSON2html 表试图更改 bool 单元格的文本值颜色

php - 数据表 : How to render <a> html tag?

html - Blogspot。如何删除背景图片?它是我张贴的照片的副本

html - 设置高度的 div 背景图像的拉伸(stretch)宽度

javascript - 如何在绿色 div 中启用文本选择?

javascript - 如何在 Javascript DOM 更新后触发 CSS 布局重新计算?

javascript - 背景颜色的 z-index 可能与 img 不同吗?

css - 父级的 100% 高度。所有 parent 高度都是动态的

wpf - 如何获得一个TextBox来填充可调整大小的列?