CSS列布局

Question

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

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

有人能提供一个示例布局吗？

Answer 1

如果你是新的网页设计，我强烈建议阅读这！

你只能开始做布局后，主导‘盒模式’。箱体模型是更多的定位元素，方框模型表示，每个元素都是页面的组合，就像一个具有宽度、边框和边距属性的方形。

使用这个属性，您可以定位一个元素(如使用边距-左:100 an从左元素移动元素100 an)！

我的布局是一个流体布局，这意味着我不使用“固定的”值，如‘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;
}

希望这能帮上忙！！

Answer 2

我不知道你到底在CSS上有多新，但是你可以做一些简单的事情。CSS非常灵活。以下是几个选项：

选项1:

如果您想在两列中拥有不仅仅是文本之类的内容，您可能希望为内容拥有两个单独的容器，在这种情况下，您将需要两个<div>'s (这些元素已经设置为块--这比其他元素更有意义)。

如果您给div一些这样的css：

.column {
    display:inline-block;
    width:50%;
}

这意味着这两个元素将尊重对方在一条线上的位置，每个元素都占据了直线空间的一半。

另一个类似的选择是给他们float:left;而不是display:inline-block;。这意味着元素将“浮动”在页面上的其他元素之上，假装它们不存在。这意味着父元素不会一直围绕在它们周围(尽管可以在后面的元素上使用clear:both;来防止这种情况)。浮动元素在很多时候都很方便，但我发现内联块通常是一个更干净的选项。

备选方案2:

这是最简单的方法！如果您只有文本，您可以只使用一个元素并为它提供css：

.columnLayout {
    -webkit-column-count:3; /* Chrome, Safari, Opera */
    -moz-column-count:3; /* Firefox */
    column-count:3;
}

如果您感兴趣的话，可以看看的信息！

重要的是要记住这是CSS，CSS有很多选择。我建议你继续尝试新事物！你永远不知道哪一个对你的设计最有效。

另外，关于盒子模型，一个盒子模型是一个元素所显示的“盒子”。重要的是不要定义每一个盒子到底是什么--否则你就会教自己互联网是如何显示的。做一个只能在一个分辨率中工作的布局是没有流动性的，并且只对某些内容起作用！

如果你有什么问题，请告诉我！