html - CSS 列布局

Question

我是网页设计的新手，我正在做一个 2 栏布局的网站。在阅读了几个教程之后，其中一个说最好的方法是使用“盒子模型”的概念，这意味着 (+-) 不定位每个元素。

什么是最好的方法？简单的那个？

有人可以提供示例布局吗？

Answer 1

如果您是网页设计新手，我强烈建议您阅读 this !

只有掌握了“盒子模型”后，才能开始布局。 Box model更多的是定位元素，盒模型表示页面中的每个元素都像一个具有宽度、边框和边距属性的正方形。

使用此属性，您可以定位元素，例如使用 margin-left: 100px 将您的元素从左侧元素移动 100px!

My layout是一种流畅的布局，这意味着我不使用“固定”值，例如“px”

header {
    background: rgb(76, 67, 65);
    margin-bottom: 16px;
    height: 96px;
    padding: 32px 0 0 2%;
}

.col1 {
    float: left;
    width: 60%;
    padding-left: 2%;
 }
.col2 {
    float: right;
    font-size: 90%;
    line-height: 1.6;
    width: 34%;
    padding-right: 2%;
}
footer {
    background: rgb(100, 98, 102);
    height: 80px;
    clear: both;
}

希望对您有所帮助!!