css - 重叠的 CSS 列

Question

我有一个重叠列的小问题。基本上我有 3 列，中间列的内容与右列重叠。我是一个 css 业余爱好者，所以当中间列中的内容比平时大时，我无法扩展右列。如果我试图让中间的列变宽，那么右边的列就会下降，一切都会失去对齐。

这是CSS代码:

#content {
 width:960px;
 margin:0 auto 20px;
 overflow:visible
}

.c_middle {
 width:960px;
 background: transparent url(../images/content_middle.gif) repeat-y top center;
}
.c_left { background: transparent url(../images/content_left.gif) repeat-y top center;}
.c_right {background: transparent url(../images/content_right.gif) repeat-y top center;}
.c_full {background: none;}

#leftcolumn, #rightcolumn {
 float: left;
 width: 210px;
 margin: 0 10px 0 0;
}

#rightcolumn {
 margin: 0 0 0 10px;
}

div#maincolumn {
 float: left;
 width: 500px;
 padding:0 10px;
}

div#maincolumn_full {
 float: left;
 width: 960px;
 padding:0 0 10px;
}

div#maincolumn_left {
 float: left;
 width: 720px;
 padding:0 10px 10px;
}

div#maincolumn_right {
 float: left;
 width: 720px;
 padding:0 10px 10px;
}

提前致谢。

Answer 1

看来您正在构建一个 960 像素的元素 - 为什么不使用 960 Grid System而不是重新发明轮子？这将是消除您目前在使用这些色谱柱时遇到的任何问题的一种快速而轻松的方法。

<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" />

<div class="container_12">
  <div class="grid_3 alpha">
    <p>Left Column</p>
  </div>
  <div class="grid_6">
    <p>Center Column</p>
  </div>
  <div class="grid_3 omega">
    <p>Right Column</p>
  </div>
  <div class="clear"></div>
</div>