Question

我有一个三列布局，我向左浮动左列，向左浮动中间列，向右浮动右列。我不确定这是否是一种铺设页面的好方法，但它在过去一直有效。我现在想做的就是给我带来麻烦。我想在中间和右列堆叠几个div，但我似乎无法实现它。

因此，中心列不是从页面的顶部到底部的一列，而是现在希望中间列是两个面板，一个堆叠在另一个上面，而不是重叠。重叠我似乎没有问题;）

任何建议或参考将不胜感激。

Answer 1

如果你还没有签出A List Apart，你应该这样做，因为它包含一些优秀的网站设计教程和指南。

THis article 尤其应该帮助你。

的CSS

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */
}

HTML

<div id="header"></div><div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div><div id="footer"></div>

Answer 2

您需要将两个中间div的高度设置为50％。每列div的宽度应为33％。

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="middleColumn">
        <div id="middleTop"></div>
        <div id="middleBottom"></div>
    </div>
    <div id="right"></div>
</div>

CSS：

#wrapper{height:300px;width:300px;}
#left,#middleColumn,#right{height:100%;width:33.33%;float:left;}
#middleTop,#middleBottom{height:50%;width:100%;}

Here is a JSFiddle describing what I'm saying.

Answer 3

以下是我将针对这种情况做的事情：

<强> HTML

<div class="wrapper">
    <div class="sidebar-left"></div>
    <div class="main">
        <div class="sidebar-right"></div>
        <div class="content top"></div>
        <div class="content bottom"></div>
    </div>
</div>

<强> CSS

.wrapper { width: 1000px; margin: 0 auto; } // Whatever width you want
.main { width: 75%; float: right; }
.sidebar-left { width: 25%; float: left; }
.sidebar-right { width: 25%; float: right; }
.content { width: 50%; float: left; clear: left; }

这会给你这样的东西：

format for layout

以下是您可以使用的JSfiddle。我添加了一些颜色和高度，所以你可以看到CSS发生了什么。您可能还想查看包装div的{{3}}，这样您就不会遇到定位问题。

在列中堆叠div

3 个答案:

的CSS

HTML