Css:Div定位（2个多Div&x27；s列（左-右）和&x2B；中心Div）

我试图这样定位网站：

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

有什么想法吗？尝试向左和向右浮动，但各自的列不断环绕到中心，使我无法将中心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;
}

---

确保所有列div都在使用：

display:inline-block;

---

以下是您问题的解决方案：

---

如果所有div都有特定的高度和宽度，则可以对所有div使用position:absolute，并指定它们的确切位置

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

---

我为每个div指定了背景色，以便您可以看到它们的位置，如果您想剪切/粘贴它以查看。我用了你指定的尺寸。但是您可以很容易地对此进行调整，使一个或多个div增长，使其大小相等，或者根据屏幕大小进行更改。

发布您的代码，或者制作一个jsfiddle来显示您的CSS。但是，在网上搜索会对你有帮助哦，这可能是有用的，但是我找到了另一种选择，比如：div.left.column{float:left；width:170px；height:1000px；}div.right.column{float:right；width:170px；height:1000px；}似乎可行，他们会有什么问题吗？@DAniel：这是可行的解决方案，但不是最好的。如果您可以发布您迄今为止尝试过的代码，那么我们可以为您找到最佳解决方案。

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