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> 

当显示的页面。 navcontainer在右侧（正如它应该），但在featuredcontainer下。当我使用相对定位将navcontainer向上移动时，它看起来很正确，但页面底部有一堆空的空间。我该怎么办？

Answer 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; } 

Answer 2

使用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; 
} 

这是一个起点，尝试使用float left或float right并查看会发生什么。捣鼓它，直到它看起来完全如何你想要它。

Answer 3

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

Answer 4

将导航和精选容器放入另一个包装div。

HTML

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

，摆脱所有的相对定位。相对定位不推荐用于这样的基本布局问题。改为使用花车。包装应该有一个固定的宽度，这使得它可以用margin：0自动适当居中。

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 5

一定要在任何浮动对象上引入一个清零（there aremanyversions ofthis technique）;然后使用margin: 0 auto将它们的包含块元素居中。