Question

我是新手，我无法解决这个问题。我在容器div中有三个div。尽管我已经将margin和padding重置为0，但他们只是不会整齐排列以达到100％ - 他们之间会出现差距。结果，div有时会溢出

我已经删除了代码以简单说明我的问题。

＆＃13;

body {
  margin: 0;
  padding: 0;
}

div {
  height: 100px;
}

.outsideDiv {
  width: 100%;
  color: white;
  background-color: black;
}

.insideDiv {
  display: inline-block;
  width: 33%;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: green;
}

#div3 {
  background-color: blue;
}

＆＃13;

<body>
  <div class="outsideDiv">
    <div class="insideDiv" id="div1">width = 33%</div>
    <div class="insideDiv" id="div2">width = 33%</div>
    <div class="insideDiv" id="div3">width = 33%</div>
  </div>
</body>

＆＃13;

Live version

我错过了一些明显的东西，对吧？为什么div之间存在细微差距？

Answer 1

尝试改变你的css如下

.insideDiv {  display: inline-block;  width: 33.33%;  float:left;}

无视数学的神秘div宽度......当（33 + 33 + 33）＆gt; 100

1 个答案: