格，不触发水平滚动

Question

我想创造这个设计的WP模板： http://minus.com/lbi1iH25EcKsu7

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

我认为你可以得到的总体思路; ）

我知道... 是我的错：浏览器计算窗口的大小由左到右，所以如果我把它利润率将移动的分度，100％尺寸脱权。

但事实是：我不知道如何使它工作 :(

我想使“黑网吧”有申报单（我画的那些比不工作的红色和橙色）和技巧的工作......但只有左边的那些像我想要的那样工作

我想出来的想法，我想尽我所能想到的一切，没有任何工程 也许你可以帮我吗？;）

这是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 {}标记在你的内容居中后，这是不好的做法。我建议在你的精灵图像下面有两个长divs穿过屏幕。