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

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

我想让背景或图像在整个窗口中与.item div中的某个位置对齐。我可以使用很长的div或图像向左偏移，没有任何问题，但右侧会使浏览器滚动，这是我不想要的

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

在这里拉小提琴：

红旗是我的背景，看看它是怎么跑到右边的

---

理想情况下，我只需要使用CSS就可以做到这一点，我知道如果我必须使用JavaScript，那么在调整窗口大小时会变得有点笨拙。

您可以使用

.container

。如果不希望容器扩展整个宽度，则需要删除

overflow:hidden

并将其添加到另一个包装器div

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

.container {
    overflow: hidden;
}

---

您可以使用

.container

。如果不希望容器扩展整个宽度，则需要删除

overflow:hidden

并将其添加到另一个包装器div

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

.container {
    overflow: hidden;
}

---

嗨，我试过你的小提琴，把宽度和左边的属性改成了百分比，而不是px，就好像我们在处理px，那么很难让它有反应

代码：

---

小提琴：

嗨，我试过你的小提琴，把宽度和左边的属性改成了百分比而不是px，就好像我们在处理px一样，那么很难让它有反应

代码：

---

Fiddle:

您可以在

.item

的末尾使用

清除fix

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

---

您可以在

.item

的末尾使用

清除fix

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

---

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

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

容器

类别应为：

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

---

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

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

容器

类别应为：

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

---

1。你应该继续使用CSS，而不是JS。2.如果用一个函数包装所有JS代码，并将此函数添加为

window.onresize

的事件处理程序，则不会有一点笨拙。就这么简单。你应该继续使用CSS，而不是JS。2.如果用一个函数包装所有JS代码，并将此函数添加为

window.onresize

的事件处理程序，则不会有一点笨拙。是simpleI更新了我的小提琴，有一个我没有发现的支架。我正在寻找一个背景，让它贯穿整个身体，越过装物品的容器。我已经更新了小提琴，有一个我没有发现的支架。我正在寻找一个背景，让它贯穿整个身体，越过装东西的容器。谢谢，我在工作并更新了小提琴后发现了这个背景。我需要背景/图像来扩展整个身体的宽度，而不仅仅是容器。谢谢，我在工作并更新小提琴后发现了这一点。我需要背景/图像来扩展整个正文的宽度，而不仅仅是容器。我想这就是我需要的，添加一个宽度为100%且溢出隐藏的新包装，将溢出隐藏从我的容器div中移除，这是限制内容宽度所必需的。非常感谢。我想这就是我所需要的，添加一个宽度为100%且溢出隐藏的新包装，从容器div中移除溢出隐藏，这是限制内容宽度所必需的。非常感谢。