CSS div 定位（原始状态）答案

【问题标题】：CSS div positioning (original state)CSS div 定位（原始状态）
【发布时间】：2012-10-25 17:00:30
【问题描述】：

我正在尝试制作一个基本的系统，但必须使用 div 来完成。

问题是，我自己做的时候总是弄乱我的 div 样式。比如，一个 div 脱离了容器 div 之类的东西。

我要归档的内容非常基本。

应该有一个 800x800 的容器 div。
前 200 像素高度和 600 像素宽度应包含一个名为描述。
右侧200px宽度应该是一个名为logo的新div。
这里应该还有一个div，高200px，宽800px。
在底部，我们使用了 400 像素的高度和 800 像素的宽度。我想要使它像这样：（所有 400 像素）高度。

从左到右；

100px - 一个名为 block 的 div（包含一个块图像） 150px - 一个名为 item-1 的 div。 100px - 一个名为 block 的 div（包含一个块图像） 150px - 一个名为 item-2 的 div。 100px - 一个名为 block 的 div（包含一个块图像） 150px - 一个名为 item-3 的 div。 100px - 一个名为 block 的 div（包含一个块图像）

在这种情况下有人可以帮助我吗？一个小例子会让我继续前进。

谢谢。

【问题讨论】：

这看起来不像一个问题，这看起来像一个任务。这很简单，但我不想代替你解决它（我敢肯定，我不是有这种想法的人）。
一张图抵得上一千个字。
@Diodeus;为了让你相当容易，想象一个像正方形的 div。然后想象该 div 中的 2 个正方形，宽度和高度为 %50。（小时候）
@AnılÜnal - 他的意思是提供您希望最终结果的样子，而不是试图用文字来描述它。
@Shauna 我相信任何人都可以想象一个 40px 的盒子里有两个 20px 的方形盒子。我真的应该画吗？

标签： css

【解决方案1】：

以下代码应该对您有所帮助。您的总宽度超出了 800 像素，因此我将宽度增加到 850 像素。

<body>
<div style="width:850px; margin:0 auto;">
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="height:400px; width:150px; float:left" name="item-1"></div>
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="height:400px; width:150px; float:left" name="item-2"></div>
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="height:400px; width:150px; float:left" name="item-3"></div>
    <div style="height:400px; width:100px; float:left" name="block"></div>
    <div style="clear:both"></div>
</div>
</body>

【讨论】：

@VIDesignz - 浮动元素从文档的正常流程中移除，这会导致父元素折叠。 clear: both 强制兄弟元素将自身定位在浮动元素之后，这反过来又扩展了父元素。（图片的详细信息可以在我的答案中的 CSS-Tricks 链接中找到。）
@Shauna 谢谢！这很有道理……非常有用！

【解决方案2】：

首先，这里的大多数人都不乐意被要求为您完成工作，这基本上就是您在这里所要求的。你最好先尝试你想做的事情，然后带着具体问题回到这里。

也就是说，鉴于您帖子中的注释，我将尝试帮助您解决您提出的问题背后的问题。

在我看来，您对浮点数以及它们如何影响 HTML 元素（及其父元素）没有很好的理解。 CSS-Tricks has a phenomenal article on floats。简而言之，将float 应用于一个元素会使其脱离HTML 文档的正常流程，并允许您将块级元素彼此相邻对齐。当容器的所有子元素都是floated 时会出现问题，这会使父容器自身崩溃。当一个子元素是floated 而另一个不是，并且非floated 元素占用的垂直空间比floated 少时，也会发生这种折叠效果。在这种情况下，父元素“折叠”到那个较小的子元素，使较大的浮动元素溢出父元素。一旦您了解了浮动（和清除浮动）的工作原理，您的生活就会轻松很多。

此外，您可能还想查看display: inline-block;，它可以解决一些令人头疼的问题，例如水平导航。

编辑从您链接的网站的外观来看，您的另一个问题是您正在尝试修复容器元素的高度，然后使子元素的总高度加起来超过父母。为此，I refer you back to CSS-Tricks，获取有关 CSS 框模型的信息。

不过，简而言之，如果您有一个 2 英尺高的盒子，并且在里面再堆放两个盒子，一个 1 英尺高，一个 1.5 英尺高，那么里面的盒子就会伸出来容器，因为它们的高度加起来超过了容器的高度。同样的概念也适用于网页设计，尤其是当您使用固定尺寸时。

【讨论】：

@AnılÜnal - 我看到你的问题和你的 cmets 的问题是你似乎没有扎实掌握网页设计/开发的基础知识。你最好的办法是研究我上面链接的概念，这样你就知道为什么你一直有溢出问题。