的CSS：事業部的定位（2多個div的列（左 - 右）+ DIV中心）

Question

我試着去網站這樣定位：

------------------- 
{ }{  }{ } 
{ }{  }{ } 
-----{  }----- 
{ }{  }{ } 
{ }{  }{ } 
------------------- 

任何想法？嘗試漂浮左右，但各自的列不斷包裝到中心，使我無法把中心的div在那裏。

左，右列已leftcolumn和rightcolumn類

我的代碼： 左側立柱：

div.aside.gauche div.section.colonne.categories { 
    height:460px; 
    width:210px; 
    border-style:solid; 
    margin-top:16px; 
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em; 
    float:left; 
} 

div.aside.gauche div.section.colonne.commentaires { 
    height:85px; 
    width:210px; 
    border-style:solid; 
    margin-top:6px; 
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em; 
    float:left; 
} 

div.aside.gauche div.section.colonne.magasins { 
    height:321px; 
    width:210px; 
    border-style:solid; 
    margin-top:6px; 
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em; 
    float:left; 
} 

右列：

div.aside.droite div.section.colonne.recherche { 
    height:460px; 
    width:170px; 
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em; 
    float:right; 
} 

div.aside.droite div.section.colonne.suivez { 
    height:460px; 
    width:170px; 
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em; 
    float:right; 
} 

div.aside.droite div.section.colonne.partenaires { 
    height:460px; 
    width:170px; 
    border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em; 
    float:right; 
} 

中心一塊

div.milieu { 
    float:left; 
    display:block; 
} 

Answer 1

確保所有列的div使用：

display:inline-block; 

Answer 2

這裏是你的問題的解決方案：

http://jsfiddle.net/uZx4L/3/

Answer 3

如果所有的div將有特定的高度和寬度，可以使用位置：絕對所有你的divs，並指定他們去哪裏準確。

<div id='left_top'> 
    ... 
</div> 
<div id='left_middle'> 
    ... 
</div> 
<div id='left_bottom'> 
    ... 
</div> 
<div id='center'> 
    ... 
</div> 
<div id='right_top'> 
    ... 
</div> 
<div id='right_middle'> 
    ... 
</div> 
<div id='right_bottom'> 
    ... 
</div> 

與你的CSS

然後這樣：

div#left_top { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:210px; 
    height:460px; 
    background-color:red; 
} 

div#left_middle { 
    position:absolute; 
    top:460px; 
    left:0px; 
    width:210px; 
    height:85px; 
    background-color:yellow; 
} 

div#left_bottom { 
    position:absolute; 
    top:545px; 
    left:0px; 
    width:210px; 
    height:321px; 
    background-color:blue; 
} 

div#center { 
    position:absolute; 
    top:0px; 
    left:210px; 
    right:170px; 
    background-color:cyan; 
} 

div#right_top { 
    position:absolute; 
    top:0px; 
    right:0px; 
    width:170px; 
    height:460px; 
    background-color:magenta; 
} 

div#right_middle { 
    position:absolute; 
    top:460px; 
    right:0px; 
    width:170px; 
    height:460px; 
    background-color:green; 
} 

div#right_bottom { 
    position:absolute; 
    top:920px; 
    right:0px; 
    width:170px; 
    height:460px; 
    background-color:purple; 
} 

我指定的背景色爲每個div中，你可以看到他們在哪裏，如果你想進行剪切/粘貼的去看一看。我使用了你指定的尺寸。但你可以很容易地適應這一點，讓一個或多個div增長，所以它們都是相同的大小或根據屏幕大小而變化。