0

我一直在弄乱我的几个网页，因为当网页缩小或放大时它们完全搞砸了。我尝试过<center>将<div align:"center">网页居中，但它似乎不起作用。引起悲伤的网页是：

http://officialnewvintage.com/photos.html

http://officialnewvintage.com/joel.html

有任何想法吗？

4

2 回答 2

1

There are two techniques I usually do, first is to let it reflow: http://jsfiddle.net/PALur/ and second is to maintain a fixed width and the number of columns: http://jsfiddle.net/Qg8XQ/2/ (edit: corrected the formula to calculate width)

Note that you need to modify the HTML, your way of dividing into columns would not work right that way.

于 2012-09-03T06:30:45.023 回答
1

您需要使用包装类包装内容，因为<center>标签和align属性div现在无效。:)。对于您的问题，我建议您在body.

<body>
    <div class="wrap">
    ...
    ...
    </div>
</body>

在 CSS 中，请给出一个固定的宽度。

.wrap {width: 960px; margin: 0 auto;}

的宽度960px最适合所有浏览器，因为它默认由1024px和1280px宽度使用。

如果您有需要流过的内容，例如页眉和页脚的背景，那么在这种情况下，您只需在元素内部添加包装器，它承载背景。例如，如果有<div class="header">...</div>一个背景，它流动，你可以使用这种方式：

<body>
    <div class="header">
        <div class="wrap">
        ...
        ...
        </div>
    </div>
</body>

如果您不明白任何部分，请告诉我。:)

在您的网站上进行编辑：

  1. 替换第 43 - 44 行：

    #joel
    margin-top: 200px

    和

    #joel {
    margin-top: 200px;
    }

  2. 第 86 行：删除</p>.

让我知道这些修复后的输出是什么。

于 2012-09-03T05:28:18.110 回答