Question

我试图在最大宽度容器中获取浮动项目后面的全宽背景或图像。该页面将是响应式的，因此我无法修复.item对象的高度，也无法确定每行中将显示多少。

我希望窗口全长的背景或图像与.item div中的位置对齐。我可以使用一个非常长的div或图像偏移到左边没有任何问题，但右侧使浏览器滚动我不想要。

.bg {
      background: red;
      bottom: 0;
      height: 30px;
      left: -1000px;
      position: absolute;
      width: 2000px;
      z-index: 0;
}

在这里小提琴：http://jsfiddle.net/K8uAh/4/

红色横幅是我的背景，看它是如何向右跑。

理想情况下我会这样做只使用CSS，我知道如果我必须使用JavaScript路线，那么在窗口调整大小时它会变得有点笨拙。

Answer 1

您可以使用.container。如果您不希望容器扩展整个宽度，则需要删除overflow: hidden;并将其添加到其他包装器div中。

body {
    width: 100%;
    margin: 0;
}

.container {
    overflow: hidden;
}

Answer 2

您好我尝试了你的小提琴并改变了宽度和左边属性以获得百分比而不是px，好像我们正在处理px然后很难让它响应。

代码：

 .bg {
    background: red;
    bottom: 0;
    height: 30px;
    position: absolute;
    width: 125%;
    left:-16%;
    z-index: 0;
}

小提琴：http://jsfiddle.net/K8uAh/1/

Answer 3

您可以在clear-fix的末尾使用.item div。

body {
    width: 100%
}

.container{
    background: red; /* Change your color here */
    margin: 0 auto;
    width: 100%
    overflow: hidden;
}
.item{
    background: #999;
    float: left;
    margin: 10px 5%;
    position: relative;
    width: 40%;
}

Fiddle

Answer 4

首先：你的小提琴css不正确：

body {
    width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/

see what i mean

秒：要使用全宽bg：

 background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
 background-size :100% 100%;

container课应该是：

.container {
    background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
    background-size :100% 100%;
    margin: 0 auto;
    max-width: 300px;
    overflow: hidden;
}

working demo

CSS全身宽度背景与浮动项目对齐

4 个答案: