以CSS为中心的div并排排列

Question

我的页面中有以下大块
样式：

.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>

显示页面时。导航容器位于featuredcontainer的右侧（应该是）。当我使用相对定位向上移动导航容器时，它看起来是对的，但页面底部有一堆空白。我该怎么办？

Answer 1

用"包装器"div包围两个div，如下所示：

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

然后将它们居中，在包装上添加边距：

#wrapper { margin: 0px auto; }

然后让两个div并排，添加一个float：

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

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

#wrapper { width: 800px; }

Answer 2

将nav和特色容器放入另一个包装器div中。

HTML

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

并消除所有的相对定位。对于这样的基本布局问题，不建议使用相对定位。请改用浮动。包装器应该有一个固定的宽度，这允许它以边距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;
}

JSFiddlehttp://jsfiddle.net/5w5SC/

Answer 3

使用float属性。使用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;
}

这是一个起点，试着使用向左浮动或向右浮动，看看会发生什么。摆弄它，直到它看起来完全是你想要的样子。

Answer 4

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

Answer 5

请确保在任何浮动对象上引入clearfix（这种技术有很多版本）；然后使用CCD_ 1将其包含的块元素居中。