0

我正在重新创建美国社区学院协会网站，可在此处查看，到目前为止一切正常，但在通过图像放置 div 时遇到了问题（您可以在此处查看我的 WIP 和完整代码）。它特别需要处理侧边栏。从实际网页中可以看出，标题和横幅/侧边栏之间存在间隙。但是在我的网页上，我能够在图像和横幅之间创建边距，但侧边栏（无论我做什么）都无法复制实际的网站。

我在我的 css 中使用了 display:inline-block，我读到在使用这个标签时，任何边距规范都将被忽略。我想知道任何潜在的替代方案是什么，因为我不想弄乱定位（无论窗口大小如何，页面都保持居中，我想保持这种状态！）这就是为什么我没有使用浮动：“侧边栏”div上的右标签。任何更好地改进代码的建议将不胜感激！这是有问题的css代码，以防你不想去我的页面查看源代码：

#header {width:970px; height:105px; position:absolute; top: 0px; background-color:#C0C0C0;}

#navbar{text-align:right;}
#navbar a{text-decoration:none; color:#787878;}

#logoalign{vertical-align:bottom;}

#banner {float:left; display:inline-block; width:730px; padding-top:105px; margin-top:10px}

#sidebar{display:inline-block; padding-top:110px; margin-top:10 px; width: 240px; height:700px; background-color:#33FF33}
4

1 回答 1

0

我会将侧边栏和横幅 div 放在包含的 div 中。

#navbar{
    margin: 0px 10px;
    width: 610px;
    height: 50px; }

#content {
    margin: 10px; }

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

#sidebar {
    margin-left: 410px; 
    width: 200px;
    height: 500px; }

这是一个jsfiddle。

于 2013-11-07T23:53:26.277 回答