css - 如何在典型布局中设置多个 div

Question

对于我的项目网站首页，我一直在尝试设置 div，如下图所示。但我无法得到所需的结果。请帮忙。

示例图像

主 div（黑色边框）的宽度为 910 像素。Div-1、2 和 5 的宽度相同，均为 900 像素。但是 Div-3 和 Div-4 是不同的，因为它们是内容页和侧边栏。Div-3 的宽度为 635 像素，而 Div-4 的宽度为 255 像素。div-3 进一步划分为 sub-div，如上图所示。所有 div 的高度都应该是 Auto。

如何设置 CSS 和 HTML？

Answer 1

当您有多个水平相邻的 div 时，您需要使用浮点数（在您的情况下，div 3 和 4 以及所有 div 3 细分）。这是一个很好的小教程，它将对您有很大帮助。

对于可变高度的列，绝对定位不起作用，所以让我们想出另一种解决方案。

我们可以“浮动”一个元素，使其尽可能地向右或向左推，并允许文本环绕它。这通常用于图像，但我们会将其用于更复杂的布局任务（因为它是我们拥有的唯一工具）。

编辑

更多教程：http ://www.html.net/tutorials/css/lesson13.php和http://www.tizag.com/cssT/float.php。

您也可以尝试尝试display: inline-block;类似的结果。

Answer 2

您已经很好地解释了代码，并且布局清晰。所以这很好。但什么是失败？是DIV-3吗？因为这似乎是个问题。我处理这个问题的方法是<div>在 DIV-3.2、DIV-3.3 和 DIV-3.4 以及 DIV-3.6 和 DIV-3.7 的多 DIV 行周围添加包装器元素。这样，那些较小的元素就存在于它们自己包含的行中，您可以轻松地将它们堆叠在一起。

如果还有其他问题，请编辑帖子或评论。