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％。你不能使用相对长度（如左边div +固定中间图像+右边div）和CSS（特别是绝对定位）来制作附加布局。如果您坚持使用此功能，则在将内容集中后，您必须overflow: hidden; html {}或body {}标记，这只是不好的做法。我建议只有两个长div在你的精灵图像下一直穿过屏幕。

div，没有触发水平滚动

1 个答案: