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

Question

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

Example Image

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

如何设置CSS＆amp; HTML？

Answer 1

当你有几个水平相邻的div时，你需要使用浮点数（div 3和4，在你的情况下，以及所有div 3细分）。 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.3的多DIV行周围添加包装<div>元素。 DIV-3.4以及DIV-3.6＆amp; DIV-3.7。这样，那些较小的元素就会存在于它们自己包含的行中，您可以轻松地将它们叠加在一起。

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