格，不觸發水平滾動

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穿過屏幕。