html - div，不触发水平滚动

Question

我正在尝试为 WP 模板创建此设计: http://minus.com/lbi1iH25EcKsu7

现在我是这样的:http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html

我想你可以大致了解 ;)

我知道...这是我的错:浏览器从左到右计算窗口的大小，所以如果我设置边距，它会将尺寸为 100% 的 div 移动到 de对。

但问题是:我不知道如何让它工作 :(.

我想用 div 制作“黑条”(我用红色和橙色绘制了那些不起作用)并且这个技巧奏效了......但只有左边的像我想要的那样工作。

我快没脑子了。我尝试了所有我能想到的，但没有任何效果。也许你能帮我？ ;)

这是html代码:

<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>

这是 css:

.barraUL {
   position: absolute;
   width: 50%;
   height: 27px;
   background-color: black;
   right: 50%;
   margin-right: 500px;
   margin-top: -20px;
}
.barraDL {
   position: absolute;
   width: 50%;     
   height: 27px;
   background-color: black;
   right: 50%;
   margin-right: 500px;
   margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
   position: absolute;
   width: 50%;
   height: 27px;
   background-color: red;
   left: 50%;
   margin-left: 500px;
   margin-top: -4px;
}
.barraDR {
   position: absolute;
   width: 50%;     
   height: 27px;
   background-color: orange;
   left: 50%;
   margin-left: 500px;
   margin-top: 325px;
}

Answer 1

右边的 div 扩展到窗口宽度的 50%。对于条形延伸到窗口长度然后切断的液体布局，您通常会制作一个底层 div(在本例中为条形和黑色图案背景)，然后将其扩展到窗口的 100%。您不能仅使用 CSS(尤其是绝对定位)使用百分比(左 div + 固定中间图像 + 右 div)等相对长度来制作附加布局。如果你坚持使用这个，你将不得不在内容居中后 overflow: hidden; html {} 或 body {} 标签那只是不好的做法。我建议只让两个长 div 在您的 sprite 图像下一直穿过屏幕。