0

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

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

我认为您可以了解总体思路；）

我知道......这是我的错：浏览器从左到右计算窗口的大小，所以如果我设置一个边距，它会将 100% 大小的 div 向右移动。

但问题是：我不知道如何使它工作:(。

我想用 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;
}
4

1 回答 1

0

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

于 2012-08-09T06:49:25.947 回答