div 不跨越页面宽度答案

【问题标题】：div not spanning page widthdiv 不跨越页面宽度
【发布时间】：2015-07-16 11:31:25
【问题描述】：

我有 3 个 div 漂浮在容器 div 中。容器的宽度为 100%，内部 3 个 div 的宽度为 33%。 div 或 body 上没有填充/边距，但容器 div 仍然没有跨越整个页面，从而迫使内部 div 重叠。请帮忙，我似乎无法在这里找到适合我的答案。

#container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#left,
#middle,
#right {
  float: left;
  width: 33%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

<div id="container">
  <div id="left">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div id="middle">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div id="right">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
</div>

【问题讨论】：

您可能需要添加 html 和 css sn-ps 以便我们有指导......
请出示您的代码，否则我们将无法提供帮助。作为一个快速通知是身体的宽度100%？如果您想跨越页面宽度，可以尝试将项目的宽度设置为33vw。
请发布您的代码，以便我们检查。
我刚试了一下，效果很好
抱歉，这里是新的，代码应该已经上线了

标签： html css

【解决方案1】：

这行得通。确保主体的宽度为 100%。

CSS

html, body {
  100%;
}

.container {
  width: 100%;
}

.item {
  width: 33%;
  float: left;
}

HTML

<body>
  <div class="container">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</body>

【讨论】：

我看到的唯一区别是您也为 html 添加了 100% 的宽度，这对我不起作用：/
您使用数字作为 id，这是无效的。必须以字母开头。

【解决方案2】：

贾斯汀，除了将容器的宽度设置为100%，尝试将位置设置为绝对或相对，像这样，

#container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: absolute; /*or relative, whatever solves it*/
}

正如您所说，将主体分成三个相等的 div，每个宽度为 33% 会留下一些空白。您可以尝试类似 width=33.3333%

另外，这个问题的答案真的很有帮助， css divide width 100% to 3 column

祝你好运。

【讨论】：

【解决方案3】：

ID 属性必须以字母开头。然而，对于类属性，没有这样的限制。你可以试试这个：

#container {
    width: 100%;
    padding:0;
    background: green;
}

.box {
    width: 33%;
    float:left; 
    background: red;
    
}



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

<div id="container">
  <div class="box">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div class="box">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div class="box">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
</div>

【讨论】：

试过这个，它仍然不适合我。当我运行它并检查元素时，容器宽度为 1903 像素，页面宽度为 1920 像素。容器右侧仍有空白。