CSS中布局的构造

Question

我该如何拼凑每一个div？

我正在学习如何用CSS编写代码，而且我是相当新的，我想在每一行中编写3-8块div。一旦我把一些拼凑在一起，它们在dreamweaver IDE (以及浏览器显示中)中就显得不均匀了。

另外，如何自动调整它们的大小？我一直在尝试宽度:100%，但我得到的只是奇怪的调整大小的形状和大小。

如果你不明白我的意思，我的网页在技术上是这样的

----------------------------------------------------------------------------------
|                                                                                |
|                               background image 1                               |
|--------------------------------------------------------------------------------|
|                       |            |                    |                      |
|     bg img 2          |   bg img 3 |  bg img 4          |    bg img 5          |
|                       |            |                    |                      |
|--------------------------------------------------------------------------------|
|                                                                                |
|                           background image 5                                   |
|                                                                                |
|--------------------------------------------------------------------------------|

但是，每次我将div放在同一行时，每一行都包含div，即

<div class="container">
    <div id="bg1" width:100; height:20;>
        <div id="bg2" width:150; height:20;>
            <div id="bg3" width: 250; height:20; >
                <div id="bg4" width:130; height:20;>
                </div>
            </div>
        </div>
    </div>
</div>

在同一地点都乱七八糟的。我做错什么了吗？

如果有人能告诉我一步一步的解决办法.

再一次，我想做的是：

1. 网站的建设与CSS的布局。
2. 根据浏览器大小自动调整整个页面的大小。

谢谢。

Answer 1

首先，当你是初学者时，不要使用内联样式来制作原型。他们太难编辑现场了。它会使这个过程慢下来。

你听起来是新来的，但这很酷！我们都是从某个地方开始的。

首先创建你的5个div，并给他们一个唯一的ID。ID是只出现在页面上一次的东西。类用于出现不止一次的事物，或者可能在将来的某个时刻出现不止一次。

然后将css文件链接到每个div的单独声明中。在响应性设计方面，您使用width=100%的方法是正确的，尽管在实践中，即使是“全宽度”div，它通常也是92%左右，因为一点间隔是很好的，边框和填充会增加整个宽度。带有6%填充的90%宽度div总是比窗口本身更宽(大于100%)，这会导致奇怪的行为，所以从一开始就要记住这个盒子模型。

以下是一些建议，我希望有人能早点告诉我：

如今，对于快速原型CSS来说，事情要比过去容易得多。解决这些问题的最好方法是在Chrome工具中编辑样式表。下载并安装Chrome，如果您还没有使用它。控件单击您的div并选择“检查元素”。在检查器中播放，并查看如何通过对CSS样式进行双击并输入新值来实时编辑CSS样式。如果单击"resources“选项卡，您可以同时看到整个样式表，并类似地编辑属性，甚至添加新的属性。查看调整大小的最佳方法是临时声明一个大纲如下：

#mydiv1 {outline: 2px dashed red;}

因为轮廓线不会增加元素的宽度，与边框不同。然后，当您完成之后，您可以删除大纲声明。此外，请记住，在Chrome工具中对文档的CSS所做的任何更改都将在您离开时丢失。因此，复制并粘贴到文本编辑器中。

如果您对响应性设计感兴趣，这是很棒的，一旦您对以上所有内容都很在行，那么就系上安全带，读一读Ethan Marcotte的书：

http://www.abookapart.com/products/responsive-web-design

Marcotte的指导方法是从像素开始，然后在样式表中转换成百分比和ems，但不需要这样。您可以在浏览器中使用这些变量设计"live“。

希望这能帮上忙！

Answer 2

首先，甩掉Dreamweaver。这是个障碍。一直都是辆马车。你越早摆脱拐杖，你就会过得越好。

第二，看看你的例子，我看到了一个旧的剪贴画模板-n-骰子photoshop成了一个表格方法。用CSS中的DIVs来复制它是毫无意义的。

第三。如果您确实需要一个表(数据)，那么保存它一个表。没什么不对的。

第四。所有这些的关键是理解浮点数和包含浮点数的内容。大多数CSS网格系统都是基于这一点的。我会看一下960.css，然后开始玩这个游戏。它应该有助于你正确的方向，了解正在发生的事情。

Answer 3

您可以使用<header>标记作为最上面的部分，而<footer>标记用于底部的部分。显然，它也适用于divs，但在我看来，这样做更干净。

这意味着您将有以下代码：

HTML:

 <header id="img1">
 </header>
 <div id="img2">
     &nbsp;
 </div>
 <div id="img3">
     &nbsp;
 </div>
 <div id="img4">
     &nbsp;
 </div>
 <div id="img5" class="newrow">
     &nbsp;
 </div>
 <footer id="img6">
 </footer>

它可以很好地代表你想要的结构。要对此进行样式化，您可以使用CSS，对于这个问题有许多可能的解决方案。一种简单的解决方案是将<header>和<footer>设置为100%宽度，并将所有<div>s浮动到左边，以便剩余的内容(在本例中为其他<div>)位于其右侧。然后，您只需设置所有<div>s的宽度，如果您想要设置它的百分比，只需确保它的总和为100，否则您将有一个差距在右边。此外，您应该在最后一个div上放置一个margin-left，以确保内容被正确放置。

这个可以像这样编码

CSS

body > header,
body > footer {
    width: 100%;
    clear: both;
}

body > div {
    float: left;
}

#img2 {
    width: 30%;
}

#img3 {
    width: 10%;
}

#img4 {
    width: 30%;
}

#img5 {
    width: 30%;
}

body > div.newrow {
    float: none;
    margin-left: 70%;
}

您可以看到这个代码这里的一个小示例，您可以抓取它的代码并在其中运行这里。

但是就像我说的，有很多方法可以实现你想要的布局，这只是一个例子。