Html 在列中堆叠div

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

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

---

如有任何建议或参考，将不胜感激

如果您还没有单独签出，您应该签出，因为它包含一些优秀的教程和网站设计指南

我尤其应该帮助你

Css Html

---

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

HTML:

---

以下是我在这种情况下应该做的：

HTML

这将为您提供如下信息：

---

这是一个你可以玩的游戏。我添加了一些颜色和高度，以便您可以看到CSS正在发生什么。您可能还需要查看包装器div的配置，这样就不会出现定位问题。

我有点搞不清楚您到底想做什么。你有没有可能上传一张图片，在上面画出你想要的结果？给我们看看你的代码，这样我们就能更好地帮助你。谢谢，这正是我想做的。你知道，我在动态调整div大小时遇到了跨浏览器问题。如果我把所有的列都设置为33%，右边的那一列就会被压缩。我最后制作了一个30%的专栏来解决这个问题。当浏览器窗口未最大化时，这尤其是一个问题。显然33%对你有效，那么我做错了什么？你检查过填充物了吗？如果这是你想要的，接受它作为答案或者投票

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 */
}

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

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

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

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

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