0

我有一个通过 CSS 居中对齐的 DIV。但问题是：当我想将第二个 DIV 居中对齐时，这个 DIV 会扭曲或左对齐。具有“绝对位置”的 DIV 必须是可滚动的，这一点很重要。另一个“位置固定”的 DIV 包括固定的，并且必须始终保持在顶部。我究竟做错了什么？查看图片：http ://home.arcor.de/freedownload/wrong.jpg这是 HTML 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>
<title>{TITLE}</title>
<link href="site.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="top_fixed_content">
    <div id="topheader">
        <span id="topheader_logo"></span>
    </div>
    <div id="navigation"></div>
</div>
    <div id="main_content">
    <div id="main">noisy lines...</div>
    <div>
</body>

</html>

这是CSS代码：

html {
    background-image:url(sitebg.png);
}
body {
    margin: 0px;
    padding: 0px;
}
a {
    color: #41a9ef;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #ff9900;
    text-decoration: none;
}
#top_fixed_content {
    position: fixed;
    left: 50%;
    width: 1170px;
    margin-left: -585px;
    z-index: 1000;
}
#topheader {
    background-color: #fbfbfb;
    height: 103px;
}
#topheader_logo {
    position: absolute;
    top: 33px;
    left: 10px;
    background-image:url(logo.png);
    background-repeat: no-repeat;
    width: 232px;
    height: 40px;
    display: block;
}
#navigation {
    background-image:url(navigationbg.png);
    background-repeat: repeat-x;
    background-color: #48b1f8;
    height: 34px;
}
#main_content {
    position: absolute;
    background-color: #fbfbfb;
    width: 1170px;
    margin-left: -585px;
}

我希望有人可以帮助我并找到解决方案。将不胜感激。

4

1 回答 1

0

你忘了关闭#main_content，替换

<div id="main_content">
<div id="main">noisy lines...</div>
<div>

和

<div id="main_content">
<div id="main">noisy lines...</div>
</div>

并添加left: 50%到CSS#main_content

于 2013-10-06T11:08:09.783 回答