Question

我正在阅读HTML / CSS图书并尝试通过div并排放置多个float元素，每个元素都有固定的宽度和边距，以便它们完美契合进入页面宽度。即使将本书的例子简化为最简单的形式，最后一列总是被撞倒，好像包含的元素不够大。有什么见解吗？

<html>
  <head>
    <style>
      body {
        width: 960px;
      }
      #c1, #c2, #c3 {
        float: left;
        width: 300px;
        height: 50px;
        margin: 10px;
        border: 1px dashed black;
      }
    </style>
  </head>
  <body>
      <div id="c1">
      </div>
      <div id="c2">
      </div>
      <div id="c3">
      </div>
  </body>
</html>

https://jsfiddle.net/1otbf659/

Answer 1

因为你有边框，你的div不是300px。你的div是302px。只需将box-sizing: border-box添加到您的div。

 #c1, #c2, #c3 {
  float: left;
  width: 300px;
  height: 50px;
  margin: 10px;
  border: 1px dashed black;
  box-sizing: border-box;
}

这是JSFiddle demo

多个固定宽度的列不能并排放置

1 个答案: