Question

我正在尝试建立一个基本系统，但是必须使用div来完成。

问题是，当我自己做的时候，我总是弄乱我的div造型。就像，一个div从容器div和类似的东西中消失。

我想要的是非常基本的。

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

从左到右;

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

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

谢谢。

Answer 1

以下代码可以帮助您。你的总宽度超出了800px，所以我将宽度增加到了850px。

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

Answer 2

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

那就是说，我会根据您帖子中的说明，尝试帮助您处理您所述问题下面的问题。

听起来好像你不了解浮点数，以及它们如何影响HTML元素（及其父元素）。 CSS-Tricks has a phenomenal article on floats。简而言之，将float应用于元素会使其脱离正常的HTML文档流，并允许您将块级元素彼此对齐。当容器的所有子元素都float时，会出现问题，这会导致父容器自身崩溃。当一个子元素被float编辑，但另一个子元素不是，并且非float ed元素占用的垂直空间少于float时，也会发生此折叠效果ed one。在那种情况下，父母＆＃34;崩溃＆＃34;到那个较小的childe元素，留下较大的浮动元素溢出父母。一旦你理解浮动（和浮动清除）如何工作，你的生活将会轻松得多。

此外，您可能还需要查看display: inline-block;，它可以解决许多令人头疼的问题，例如横向导航。

修改从您关联的网站的外观来看，您的另一个问题是您正在尝试修复容器元素的高度，然后使子元素的总高度增加最多超过父母。为此，I refer you back to CSS-Tricks，了解有关CSS盒子模型的信息。

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

CSS div定位（原始状态）

2 个答案: