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>

为了按照您想要的方式排列menupicsdiv,请创建一个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 回答