Question

我正在努力学习CSS。到目前为止，我一直在落后并使用表来管理我的页面布局。

我想迁移到css，但我遇到了一些问题。

我使用表格的当前页面布局：

enter image description here

我尝试使用css按照以下代码重新创建此布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>page layout</title>
    <style type="text/css">

        html, body {
            text-align:center;
        }

        #wrapper {       
            margin: 0 auto;       
            width: 1200px; 
            text-align:left;}

        #header {
            height: 100px;
            overflow: auto;
            background: green;
        }

        #main {
            background: yellow;
            float: left;
            width: 800px;
            height: 400px
        }

        #menu {
            background: red;
            float: left;
            width: 200px;
            height: 200px
        }

        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px
        }
        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px
        }
        #adverts {
            background: pink;
            float: left;
            width: 200px;
            height: 400px
        }

        #footer {
            background: grey;
            float: left;
            width: 1200px;
            height: 100px
        }


    </style>

</head>
<body>
<div id="header">
    Header
</div>

<div id="menu">
    menu
</div>
<div id="pics">
    pics
</div>
<div id="main">
    main
</div>

<div id="adverts">
    adverts
</div>

<div id="footer">
    footer
</div>

</body>
</html>

这会产生以下输出： enter image description here

正如您所看到的那样，pics div位于错误的位置，这应该位于页面底部不在菜单div下面？

我的问题，如何在正确的位置获得图片div？其次，我如何将整个页面居中？

最后，这是管理页面布局的最佳方法吗？如果我的'主'div太满了信息，会发生什么？它会自动调整其高度以显示所有信息吗？这是溢出：auto会允许的吗？

一如既往地欣赏帮助， [R

Answer 1

您的pics div不按顺序排列。它需要出现在footer div：

之前

你有这个：

<div id="footer">
    footer
</div>

<div id="pics">
    pics
</div>

你需要这个：

<div id="pics">
    pics
</div>

<div id="footer">
    footer
</div>

为了按照您想要的方式排列menu和pics div，请创建一个div包装（包含）它们（menupics在我的CSS /下面的HTML）。

此代码的工作方式与上面列出的一样：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>page layout</title>
    <style type="text/css">

        html, body {
            height: 100%;
            width:1200px;
            text-align:center;
        }

        #header {
            height: 100px;
            overflow: auto;
            background: green;
        }

        #main {
            background: yellow;
            float: left;
            width: 800px;
            height: 400px;
        }

        #menupics {
          float: left;
          width: 200px;
          height: 400px;
        }

        #menu {
            background: red;
            float: left;
            width: 200px;
            height: 200px;
        }

        #pics {
            background: brown;
            float: left;
            width: 200px;
            height: 200px;
        }

        #adverts {
            background: pink;
            float: left;
            width: 200px;
            height: 400px;
        }

        #footer {
            background: grey;
            float: left;
            width: 1200px;
            height: 100px
        }


    </style>

</head>
<body>

<div id="header">
    Header
</div>

<div id="menupics">
  <div id="menu">
    menu
  </div>
  <div id="pics">
    pics
  </div>
</div>

<div id="main">
    main
</div>

<div id="adverts">
    adverts
</div>


<div id="footer">
    footer
</div>

</body>
</html>

Answer 2

如何将整个页面居中？

你需要在你的其他div上放置一个div，它有一个宽度设置和以下css规则： margin: 0 auto 0 auto;。

这是管理页面布局的最佳方法吗？

你的html还不错，但你的CSS指定太多了。基于CSS的布局越少越好。尽量避免指定宽度和高度。

在上面的部分中，我提到添加一个div来包装你的其他div，这样你就可以使页面居中。该div需要一个宽度分配给它，因此它可以居中，但如果你没有指定宽度，那么对于这个包装内的div，它们将自动水平填充可用空间，因为它们是块级元素。此外，如果未指定高度，则将根据其中的内容占据高度。因此，如果您希望它自动变大，您可以不指定高度。最后，如果你希望你的div占据一些最小高度而不是增长到大于某个最大高度，那么就有min-height和max-height css规则（注意这些规则不适用于某些传统浏览器）。

我无法解决您的其他问题，因为我的工作阻止了图片主持人）=。

表格页面布局的CSS版本

2 个答案: