Question

我在容器div里面有3个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>

Answer 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>

Answer 2

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

＆＃13;

#container {
    width: 100%;
    padding:0;
    background: green;
}

.box {
    width: 33%;
    float:left; 
    background: red;
    
}



body {
    margin: 0;
    padding: 0;
    width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 3

Justin，除了将容器的宽度设置为100％之外，尝试将位置设置为绝对或相对，如下所示，

BOOL isDeviceWorkingFine();

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

此外，这些问题的答案确实很有帮助， css divide width 100% to 3 column

祝你好运。

div不跨越页面宽度

3 个答案: