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 一直穿过屏幕。