将表格转换为 CSS 层

Question

我不太擅长 CSS、HTML 和标记，但是在阅读了很多 CSS 文章之后，我只是不知道如何将 div 元素放在正确的位置。

• 表格中的当前站点：http://daweb.nl/
• div 中的当前尝试：http://daweb.nl/daweb/

我希望将正确的菜单和内容放在正确的位置。如果您对我的 HTML 和 CSS 的当前状态有一般性意见，请随时提出。我经常使用 CSS、HTML，但从未使用 div 元素从头开始构建网站。

Answer 1

http://jsfiddle.net/qJBpk/10/

检查预览 此处。

这是一个基本设置，您有一个包装 div，其中包含所有结构：标题、三列和页脚。

包装 div 的边距设置为自动，这将允许它在浏览器窗口中水平居中放置（及其所有内容）。

这三列的浮动属性设置为左侧，以便每一列都放置在另一列旁边。

页脚对两者都设置了明确的属性，这将允许将其放置在最高的浮动列之后，以避免布局崩溃。

Div 元素是块级元素。这意味着，除其他外，它们占用了所有可用的宽度空间，因此无需为 #header 和 #footer div 设置宽度。

编辑

为了避免跨浏览器不兼容和问题，最好重置 CSS（一组 CSS 规则，使所有元素在所有浏览器中显示尽可能相同），例如 YUI。将其放在任何其他 CSS 代码之前。

Answer 2

这是开始学习 CSS 定位的好地方。
另外，在查看代码后，您可能希望将某些元素包装在包装器 div 中，以便可以使用一条 CSS 规则将所有内容放置在其中。

而不是：

<div id="menu-header">
    <h1>HEADER</h1>
</div>
<div id="menu-body">
    <p>MENU BODY</p>
</div>

尝试类似：

<div id="menu">
    <div id="menu-header">
        <h1>HEADER</h1>
    </div>
    <div id="menu-body">
        <p>MENU BODY</p>
    </div>
</div>

这样，如果您想移动菜单及其中的所有内容，您可以编写如下 CSS 规则：

#menu {float:left;margin:15px 0 0 25px;}

Answer 3

只是另一个！ ;-)

完整工作演示： http://so.devilmaycode.it/converting-tables-to-css-layers" rel="nofollow">http:// /so.devilmaycode.it/converting-tables-to-css-layers

希望这有帮助！

Answer 4

看起来像一个简单的 3 div 布局。您需要创建 3 个 div。一个用于左侧、中间和右侧内容。这三个 div 将被放置在一个包装 div 中。

因此，获取 left_menu、content 和 right_menu div，给它们一个宽度并将它们设置为 float: left;所以它们都会被放置在彼此旁边。将它们放在比所有三个都大的包装 div 中。你完成了！