我想用 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>
我做错了什么？提前致谢。
最佳答案
@Maccath 完全正确。但是，我建议不要更改您的任何数字，而是将其添加到您的 CSS 文件的顶部:
* {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
支持比 IE8 更新的所有内容 - 您的宽度和高度将包含填充。 此外，将 CSS 中的边距数字更改为填充，您将获得所需的结果。
关于html - CSS 列百分比无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13397256/