0

我的页面有以下部分。
风格：

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}

和示例 HTML：

<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>

页面显示时。navcontainer 位于（应该如此）的右侧，但位于特色容器的下方。当我使用相对定位向上移动 navcontainer 时，它看起来正确，但页面底部有一堆空白空间。我该怎么办？

4

5 回答 5

1

将导航和特色容器都放入另一个包装器 div。

HTML

<div class='wrapper'>
    <div class="navcontainer">
        menu
    </div>
    <div class="featuredcontainer">
        content
    </div>
</div>

并摆脱所有的相对定位。对于此类基本布局问题，不建议使用相对定位。改用浮点数。包装器应该有一个固定的宽度，这允许它以margin: 0 auto 正确居中。

CSS

.wrapper{
    width:752px;
    margin: 0 auto;
    overflow:auto;
}
.featuredcontainer {
    width: 450px;
    height: 700px;
    float:left;
    border: 1px groove grey;
}
.navcontainer{
    float:left;
    height: 600px;
    width: 300px;
    background:#ff0;
}

JSFiddle http://jsfiddle.net/5w5SC/

于 2012-07-09T18:12:54.523 回答
1

用“包装器” div 围绕您的两个 div，如下所示：

<div id="wrapper">
    <div class="featuredcontainer">content</div>
    <div class="lessonnavcontainer">menu</div>
</div>

然后将它们居中，向包装器添加边距：

#wrapper { margin: 0px auto; }

然后让两个 div 并排，添加一个浮点数：

.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }

为了使居中工作，您需要在包装器上声明一个宽度：

#wrapper { width: 800px; }
于 2012-07-09T18:13:49.503 回答
0

使用浮动属性。使用 float，css 可以将 div 水平放置在彼此相邻的位置。

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}

这是一个起点，尝试使用向左浮动或向右浮动，看看会发生什么。摆弄它，直到它看起来完全符合您的要求。

于 2012-07-09T18:06:52.430 回答
0

要让它们并排，您需要在 CSS 中添加 float 属性。要让它们根据页面宽度调整大小，您需要为它们添加相对宽度。要将它们置于页面中心（水平），您需要将 div 放在 html 中相对定位的 div 中。这是一个小提琴。http://jsfiddle.net/Ne5zs/

于 2012-07-09T18:12:42.213 回答
0

确保在任何浮动对象上引入 clearfix（这种技术有 很多 版本）； 然后使用 . 将它们的包含块元素居中。margin: 0 auto

于 2012-07-09T18:14:31.110 回答