Question

我正在尝试构建一个带有侧边栏的两个圆柱布局，该侧边栏始终位于页面的左侧，主要内容区域居中，当窗口调整大小时，居中的内容最终会碰到导航栏，但从不移动任何比他们触摸时更远的地方（将留下：150px）。

有人能帮助我吗？

这是CSS：

@charset "UTF-8";
/* CSS Document */

body,td,th {
    font-size: 16px;
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
}

body {
    background-color: #FFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
}

#nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 10000px;
    background-color: #D61D21;
    text-align: right;
}

#nav a:link {
    color: #FFF;
    text-decoration: none;
}

#nav a:visited {
    color: #FFF;
    text-decoration: none;
}

#nav a:hover {
    color: #FFF;
    text-decoration: underline;
}

#main {
    width: 810px;
    height: 810px;
    margin: 0px auto;
}

这是html：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="nav">
        <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
        <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p>
        <p><a href="logos.php">LOGOS</a> &nbsp;</p>
        <p><a href="print.php">PRINT</a> &nbsp;</p>
        <p><a href="web.php">WEB DESIGN</a> &nbsp;</p>
        <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p>
        <p><a href="contact.php">CONTACT</a> &nbsp;</p>
    </div>

    <div id="main">
        ENTER CONTENT HERE
    </div>

</body>
</html>

非常感谢任何帮助！

Answer 1

我刚学到的一个巧妙的小技巧就是让你的#content位置：相对;然后使其中的所有子元素位置：绝对;这样，所有子元素都是您的内容区域的绝对元素，内容将调整为任何分辨率。为我节省了大量的时间，我无法相信我曾浪费多少时间来浪费铺设动态网站。

希望这能为你做点什么。

Answer 2

这样做：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="nav">
        <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
        <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p>
        <p><a href="logos.php">LOGOS</a> &nbsp;</p>
        <p><a href="print.php">PRINT</a> &nbsp;</p>
        <p><a href="web.php">WEB DESIGN</a> &nbsp;</p>
        <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p>
        <p><a href="contact.php">CONTACT</a> &nbsp;</p>
    </div>

    <div id="wrapper">
        <div id="main">
            ENTER CONTENT HERE
        </div>
    </div>
</body>
</html>

CSS：

#wrapper{
    margin-left: 150px;
}

你要做的是在你的主div周围创建一个包装器div，并使该包装div具有150px的左边距，以便它与导航栏并排。现在主div中的所有调整大小都应该限制在包装器中。

如何在浏览器调整大小时修复重叠居中的静态div？

2 个答案: