css：div定位（2个多个div的列（左-右）+中心div）答案

【问题标题】：Css: Div positioning (2 multiple div's column (left - right) + center div)css：div定位（2个多个div的列（左-右）+中心div）
【发布时间】：2011-11-28 08:43:16
【问题描述】：

我正在尝试这样定位网站：

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

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

【问题讨论】：

发布你的代码，或者做一个 jsfiddle
向我们展示您的 CSS。然而，在网上搜索three column layout 会对您有所帮助

标签： css html positioning

【解决方案1】：

确保所有列 div 都在使用：

display:inline-block;

【讨论】：

哦，这可能很有用，但我找到了另一种说法：div.left.column { float:left;宽度：170px；高度：1000px； } div.right.column { float:right;宽度：170px；高度：1000px； } 似乎有效，他们会有什么问题吗？
@DAniel：这是一个可行的解决方案，但不是最好的。如果您可以发布您迄今为止尝试过的代码，那么我们可以为您找到最佳解决方案。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果您的所有 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>

然后用你的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 增长，使它们大小相同或根据屏幕大小而变化。

【讨论】：