Question

我有一个重叠列的小问题。基本上我有3列，中间列的内容与右列重叠。我是一名css amatuer，所以当中间列中的内容比平时更大时，我无法扩展正确的列。如果我试图使中间列更宽，那么右列会下降，一切都会失去对齐。

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

看来你正在构建一个960px项目 - 为什么不使用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>

Answer 2

没有你的标记很难分辨，但似乎在某些情况下你的宽度+边距+填充水平地超过960px。但同样，在不知道如何嵌套标记的情况下，很难说清楚。

我同意Jonathan Sampson的意见 - 重塑960网格系统毫无意义。如果你能够解决这个问题，那么在某些浏览器中，如果你担心这个问题，你将不可避免地遇到奇怪的问题。为什么不利用其他人已经完成所有工作的努力。

重叠CSS列

2 个答案: