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將它們的包含塊元素居中。