html - 基本的 HTML 帮助。无法将页面分成三个

Question

我试图将网页分成三个相等的部分，但即使我将所有三个 div 的宽度设置为 33%，第三个 div 也会换行。如果我将最后一个 div 设置为 32%，它就会出现回到队列中。 div 甚至容器都没有边距或填充。

非常感谢任何帮助。

Answer 1

这里有一个非常可以快速解决您的问题的方法。

body {
    padding: 0;
}

.col-container {
    width: 100%;
    display: table;
    clear: both;
}

.col-third {
    width: 33%;
    float: left;
}

.col-third:first-child, .col-third:last-child {
    background: wheat;
}

.col-third:nth-child(2n){
    background: red;
}

<div class="col-container">
    <div class="col-third">
        <p>content</p>
    </div>
    <div class="col-third">
        <p>content</p>
    </div>
    <div class="col-third">
        <p>content</p>
    </div>
</div>

点击运行片段查看