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

【问题标题】：CSS columns percentage does not work as expectedCSS 列百分比无法按预期工作
【发布时间】：2012-11-15 12:08:29
【问题描述】：

我想用 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 代码：

<body>

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

</body>

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

【问题讨论】：

标签： html css percentage multiple-columns

【解决方案1】：

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

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

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

【讨论】：

不错的技巧，从来不知道那个 - 应该非常方便，因为这对我来说也是一个经常遇到的问题！

【解决方案2】：

.content 的边距是您的问题。边距会增加整体内容的宽度，因此总宽度为 100% 宽度的 20px，这就是它强制列换行的原因。

我建议在 .content 上使用百分比边距。将 .content 的宽度减小到 66%，然后将边距设置为 ... 0.66%（奇怪的数学，因为它是相对的）。然而，这确实有一个缺点，即您的列之间的间隙不会根据浏览器窗口的宽度保持一致。

【讨论】：

如果我删除相对，是否可以将宽度设置为 70%-20px ？ /nvm 但是，可以在 CSS 中做减法吗？
很遗憾，您不能在 CSS 中进行数学运算。

【解决方案3】：

删除

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

它调整 div 的大小并总结它超过 100%

【讨论】：