Question

我想在HTML + CSS中创建三列，第一列为15％，第二列为70％，第三列为15％。问题是，在我的代码中，当我调整窗口大小时，第三列正在收尾。我为我的网站编写了这样的CSS：

.maincont {
      margin-left: 0px;
      margin-right: 0px;
      width: 100%;
    }

.lcol,
.rcol,
.content {
      display: inline;
      float: left;
      position: relative;
      margin-left: 10px;
      margin-right: 10px;
    }

.lcol {
      width: 15%;
      background-color: red;
    }

.rcol {
      width: 15%;
      background-color: green;
    }

.content {
      width: 70%;
      background-color: blue;
    }

HTML code：

<body>

  <div class="maincont">
    <div class="lcol">
    </div>
    <div class="content">
    </div>
    <div class="rcol">
    </div>
  </div>

</body>

我做错了什么？提前谢谢。

Answer 1

@Maccath绝对正确。但是，我可以建议将其添加到CSS文件的顶部，而不是更改任何数字：

* { 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
  }

支持比IE8更新的一切 - 您的宽度和高度将包含填充。此外，将CSS中的边距数字更改为填充，您将获得所需的结果。

Answer 2

.content的边距是你的问题。边距增加了整个内容的宽度，因此它总共超过100％宽度的20px，这就是它迫使列包装的原因。

我建议在.content上使用百分比保证金。将.content的宽度减少到66％，然后将边距设置为... 0.66％（奇怪的数学，因为它是相对的）。但是，这样做的缺点是，根据浏览器窗口的宽度，列之间的间隙不一致。

Answer 3

删除

margin-left: 10px;
margin-right: 10px;

它调整div大小，总结超过100％

CSS列百分比无法按预期工作

3 个答案: