0

我正在重新创建 AACC 网站（此处的页面）并且在尝试将中间的列对齐时遇到了一些问题，标题为“国家倡议”、“领先的进步”和“奖励计划”。在我的源代码中，可以通过这里的 css 查看，我创建了它，以便带有克林顿图片的横幅浮动到登录区域和侧栏的左侧。不管我是否使用 clear:both，第一列（可在我的页面底部查看）都位于右侧边栏的下方。我不完全确定如何解决这个问题，也许我只是将 clear 属性放在代码中的错误位置或任何问题。只是可以用新的眼光来看待这个。

这是我认为可以纠正问题的CSS代码：

#banner {float: left; width: 730px;}

#logbar {
background-color: rgb(95, 193, 47); color:#FFFFFF; padding: 3px; margin-left: 740px; width: 240px; height: 130px;}

#sidebar{margin-left: 740px; width: 240px; height: 700px; padding:1px; background-color: #66CC66; margin-top: 3px;}

#col1{float:left; width:236; height;300px; background-color:rgb(204, 227, 251);}
4

1 回答 1

0

我可以看到您的 HTML 结构可能的唯一方法是绝对定位元素。

#col1 {
  top: 420px;           /* Add this */
  position: absolute;   /* And this */
  width: 236px;
  background-color: rgb(204, 227, 251);
}

然而，这实际上只是一个 hack。您应该重组您的 HTML。AACC 不是一个很好的例子——他们使用表格进行布局。看看 stackoverflow 如何创建他们的侧边栏以获得更好的示例。

于 2013-11-10T00:40:12.090 回答