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

Question

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

mar*_*xin 3 html css percentage multiple-columns

我想在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;
    }

Run Code Online (Sandbox Code Playgroud)

HTML代码:

<body>

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

</body>

Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么？提前致谢.

Answer 1

Ada*_*dam 5

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

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，11 月前
查看次数：	2953 次
最近记录：	12 年，11 月前