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

Question

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

Example Image

主div (黑边)的宽度是910px。Div-1、2和5的宽度相同，为900px。但是Div-3和Div-4是不同的，因为它们是内容页面和侧边栏。Div-3的宽度为635px，Div-4的宽度为255px。Div-3进一步划分为子div，如上图所示。所有div的高度都应该是Auto。

如何设置CSS和HTML？

Answer 1

当有几个水平相邻的div (在本例中是div3和4，以及所有div3 subdiv)时，需要使用浮点数。Here是一个很好的小教程，对你有很大的帮助。

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

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

编辑

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

您也可以尝试使用display: inline-block;来获得类似的结果。

Answer 2

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

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