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;
}

希望这可以帮助!!

Answer 2

我不确定你对CSS有多新，但是你可以做一些简单的事情。 CSS非常灵活。以下是几个选项：

选项1：

如果您的两列中不仅包含文本等，那么您可能希望内容中可能有两个单独的容器，在这种情况下，您将需要两个{{1 （这些是已经设置为显示为块的元素 - 它比其他元素更有意义）。

如果你给这些div这样的css：

<div>

这意味着两个元素将在一条线上尊重彼此的位置，并且每个元素占据线的一半空间。

另一个类似的选择是为他们.column { display:inline-block; width:50%; }而不是float:left;。这意味着元素将“浮动”在页面上的其他元素之上，假装它们不存在。这意味着父元素将不再包围它们（尽管可以使用display:inline-block;来阻止它们之后的元素）。 Float元素在很多时候都非常方便，但我发现内联块通常是更清晰的选择。

选项2：

这是一种简单的方法！如果你只有文字，你可以只使用一个元素并给它css：

clear:both;

如果您有兴趣，请查看Mozilla Developer Network的information！

重要的是要记住这个IS CSS并且CSS有很多选项。我建议继续尝试新事物！你永远不知道哪种方法最适合你的设计。

另外，关于盒子模型的东西，盒子模型是元素显示的“盒子”。重要的是不要定义每个盒子的确切内容 - 否则你将自己教授互联网如何展示的古老形式。制作一个只能在一个分辨率下工作的布局没有流动性，只能用于某些内容！

如果您有任何疑问，请告诉我们！ =）

CSS列布局

2 个答案: