0

I'm trying to make a basic system but stying has to be done with divs.

The thing is, I'm always messing my div styling when I do it myself. Like, a div goes out of container div and things like that.

What I'm trying to archieve is very basic.

  • There should be a 800x800 container div.
  • The first 200px height and 600px width should contain a new div named description.
  • 200px width on right side should be a new div named logo.
  • There should be another div here, 200px height and 800px width.

  • In the bottom, we got 400px height and 800px width to use. I want to make it something like this: (all 400px) height.

    From left to right;

100px - a div named block (contains a block image) 150px - a div named item-1. 100px - a div named block (contains a block image) 150px - a div named item-2. 100px - a div named block (contains a block image) 150px - a div named item-3. 100px - a div named block (contains a block image)

Could anybody help me in this case? A little example will get my going.

Thank you.

4

2 回答 2

1

The following code should help you. Your total width goes out of 800px so I have increased the width to 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>
于 2012-11-05T19:59:38.787 回答
-1

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

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

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

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

编辑从您链接的网站的外观来看，您的另一个问题是您试图修复容器元素的高度，然后使子元素的总高度加起来超过父元素。为此，我建议您返回 CSS-Tricks以获取有关 CSS 盒模型的信息。

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

于 2012-11-05T20:01:55.977 回答