2

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

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

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

在此处输入图像描述

我尝试按照以下代码使用 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>

这会产生以下输出： 在此处输入图像描述

如您所见，图片 div 的位置不正确，这应该在菜单 div 下而不是在页面底部？

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

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

一如既往地感谢帮助，R

4

2 回答 2

1

你的picsdiv 乱序。它需要出现在footerdiv 之前：

你有这个：

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

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

你需要有这个：

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

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

为了按照您想要的方式排列menu和picsdiv，请创建一个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>
于 2012-09-15T22:37:40.123 回答
1

如何使整个页面居中？

您将希望在您周围放置一个 div，其他 div 具有宽度设置和以下 css 规则： margin: 0 auto 0 auto;.

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

你的 html 还不错，但你的 CSS 指定的太多了。使用基于 CSS 的布局，少即是多。尽可能避免指定宽度和高度。

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

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

于 2012-09-15T22:54:57.800 回答