Question

我的网站两侧出现问题，这是链接http://www.pagodamc.org 当以1024 * 768的分辨率观看时，您没有任何页面“赞助商”或“公告”部分的重叠。（如果您调整浏览器的大小，您会看到我所指的内容至）。但是，如果您调整窗口大小，则会出现严重重叠。我搜索过，找不到与我想要的相关的东西。我希望页面始终是固定宽度或至少使“赞助商”和“公告”部分不会与主页重叠。如何整合这些元素的定位？提前谢谢！

这些是我的元素

#sponsors{
z-index:300;
position:absolute;
left:0px;
top:140px;
}
#alerts{
position:fixed;
right:0px;
top:80px;
width:180px;
}

Answer 1

你的案例研究问题的反面也是如此：当屏幕太大时，它看起来也很糟糕：

Cycle Website

看起来你真正想要的是一个4列布局：

             header
-------------------------------
Sponsors | Body | Nav | 2nd Nav`

查看此css layout generator

这样做可以为您节省大量的麻烦，而且确实是行业标准的做法。

对于这样的布局，生成器工具会创建以下代码：也许你可以从中学习，并将其融入你自己的设计中！

.header{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #f4f4f4
}
.wrapper{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cccccc
}
.left1{
   position: relative;
   float: left;
   left: 4px;
   width: 115px;
   background-color: #ccccff
}
.left2{
   position: relative;
   float: left;
   left: 12px;
   width: 601px;
   background-color: #ccccff
}
.left3{
   position: relative;
   float: left;
   left: 20px;
   width: 115px;
   background-color: #ccccff
}
.right{
   position: relative;
   float: right;
   right: 4px;
   width: 161px;
   background-color: #ccccff
}
.footer{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cfcfcf
}
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}

Answer 2

你可以这样做：

html, body {
    width:1280px;
}

但该网站会很宽......

您还可以使侧边栏非常薄，并为边距和宽度添加div。但那时他们并不总是可见..

Answer 3

我通常会找到一个尽可能小的网站大小，然后使用min-width: 60em;在我的主要内容周围放置一个包装div。这样，网站永远不会压缩到那个大小以下，< strong>和可扩展（使用em）。

Answer 4

您还可以将网站设置为居中div内较小内部区域的宽度，然后将左侧和右侧面板放置为负值

#sponsors{
    z-index:300;
    position:absolute;
    left:-180px;
    top:140px;
}
#alerts{
    position:fixed;
    right:-180px;
    top:80px;
    width:180px;
}

当然，你这样放松浏览器右侧的位置，这样你的菜单就会浮动。

Answer 5

您可以在身上使用min-width，这样即使浏览器窗口很小，用户也会看到侧边栏。这应该是您的内容和侧边栏的宽度。作为替代方案，您可以在侧边栏上为不支持z-index（IE6）的浏览器设置min-width。身体有position:relative，因此要放置的侧边栏区域是身体的大小（即使有水平滚动条）。它们位于position:absolute。

<强> CSS：

* { margin:0; padding:0 }
body { text-align:center; min-width:800px; position:relative }
#content { width:600px; background:black; margin:0 auto; text-align:left }
#sponsors, #announcements { position:absolute; width:100px; background:gray; top:0; z-index:-1 }
#sponsors { left:0 }
#announcements { right:0 }

<强> HTML：

<body>
    <div id="sponsors"></div>
    <div id="content"></div>
    <div id="announcements"></div>
</body>

固定定位而不改变站点宽度

5 个答案: