将表格转换为CSS图层

Question

4

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

我希望右侧菜单和内容能够放在正确的位置。如果您对我的HTML和CSS的当前状态有一般性的意见，请随意提出。我虽然有很多使用CSS和HTML的经验，但从未从零开始使用div元素构建过网站。

- Dennis

1

使用样板代码，这是你的一个很好的开始！ - Jose Faeti

谢谢大家的回答！我已经在短时间内完成了它。非常感谢你们的回复，所有的回答都足够好被投票支持！ - Dennis

@chronoz：看看我的演示，功能齐全！;-) - Luca Filosofi

4个回答

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

- k4t434sis

2

只是另一个！;-)

希望这有所帮助！

- Luca Filosofi

啊，那很酷！我已经保存了，这非常好！ - Dennis

1

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

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

- Matt K

哈哈，你不知道这个float：left提示有多大的帮助。我对CSS还是比较新的，所以我想也许是一些float中心的东西，但是float left完美地使它向左浮动，但仍然在左侧menu_wrapper的右侧！谢谢！！ - Dennis

没问题。float: left会将元素向其容器内最左侧移动。由于那里有另一个元素（另一列），它会与其并排而不是重叠在一起。 - Matt K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jose Faeti · Accepted Answer

点击这里查看预览。

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

包装器div的margin设置为auto，这将使它与其所有内容在浏览器窗口中水平居中。

三个列的float属性设置为left，以便每个列都放置在另一个列旁边。

页脚具有clear属性设置为both，这将使其在最高的浮动列之后放置，以避免布局崩溃。

Div元素是块级元素。这意味着，它们占据所有可用的宽度空间，因此不需要为#header和#footer div设置宽度。

编辑

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