Question

我正在重新创建AACC网站（第here页）并尝试在中间对齐列，并且标题为'＃34; National Initiative＆＃34;，＆＃34 ;领先进步＆＃34;和＆＃34;奖励计划＆＃34;。在我的源代码中，可以使用css here查看，我创建了它，以便带有克林顿图片的横幅浮动到登录区域和侧栏的左侧。但是如果我使用clear，则无所谓：两个，第一列（可在我的页面底部查看），保留在右侧边栏下方。我不完全确定如何解决这个问题，也许我只是将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);}

Answer 1

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

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

然而，这真的只是一个黑客。您应该重新构建HTML。 AACC不是一个很好的例子 - 他们使用表格进行布局。看看stackoverflow如何创建他们的侧边栏以获得更好的示例。

div对齐和浮点问题

1 个答案: