Question

我试图像这样定位网站：

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

有什么想法吗？尝试左右浮动，但各自的列保持包裹到中心，使我无法将中心div放在那里。

左右列有左列和右列类

我的代码：左栏：

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都具有特定的高度和宽度，则可以对所有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增长，所以它们都是相同的大小或根据屏幕大小而改变。

Css：Div定位（2个多重div列（左 - 右）+中心div）

3 个答案: