重新创建网站时CSS Div安置

StackOverflow https://stackoverflow.com/questions/19848622

  •  29-07-2022
  •  | 
  •  

题

我正在重新创建这个美国社区学院的网站 在这里可查看, ，并且到目前为止还不错，但是在通过图像放置DIV时遇到了问题（您可以查看我的WIP并完成代码 这里）。它具体必须处理侧边栏。从实际的网页中可以看到，标题和横幅/侧栏之间存在差距。但是，在我的网页上，我能够在图像和横幅之间创建余量，但是侧边栏（不管我做什么）都不会复制实际的网站。

我正在使用显示：CSS中的内联块，并且我读到使用此标签时，将忽略任何保证金规格。我想知道有什么潜在的替代方案是什么，因为我不想弄乱定位（无论窗口尺寸如何，页面都保持为中心，我想保持这种方式！）浮点：“侧栏” 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}
有帮助吗？

解决方案

我会将侧边栏和横幅divs放置在包含的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.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top