混合液體和固定佈局 - 填寫動態空間

我最近發現，這是非常困難的混合流體和固定的版面，所以，當我終於想出了一個解決方案，香港專業教育學院現在已經有安靜了一段時間的問題，我不能不要抗拒，而要與過去幫助我的社區分享。混合液體和固定佈局 - 填寫動態空間

我想下面的樣子：

The Look i required

通過動態的空間，我的意思是它應該是非常多，當一個應用「margin:0 auto;」 CSS規則的包含分區一樣，白色的空間，左，右的元素是示例中的「動態空間」。

我有6個要求：

不得不響應。
容器必須具有960像素的最大寬度並始終需要居中。
不得不在IE8以上工作。
左邊的動態空間，必須有不同的高度，並且包含不同的顏色。
的右側動態空間必須是相同的高度有容器，但不同的顏色。
必須使用Twitter Bootstrap。

來源

2014-04-19 Dawid van der Hoven

在這一點上，我掙扎了3天，我試着從css表格單元格到使用引導列（都沒有解決）。

我也意識到，只有這樣，纔能有在巨大的屏幕尺寸「相同」位置的股利是使它的50％。

所以在這一點上，我有以下幾點：

JSFIDDLE DEMO

這是相當不錯，唯一的問題是，紅色伸出容器元素下方。

讓自己精彩不容在所有的數學大腦踢，心想：

如果我的包含元素將永遠是960像素，我需要我的div左邊爲50％，停留在相同的位置，有什麼如果我只是採取960/2 = 480px並且簡單地申請margin:-480px。

其工作出色..直到你達到你的屏幕下方約768px，所以加一個媒體查詢，它更改爲margin-left:-370px;。

它終於成功了！下面是最終代碼：

JSFIDDLE DEMO

和HTML：

<div class="" style="background: #000099; position: relative"> 
    <div class="left">l</div> 
    <div class="container" style="background: #002500">contain</div> 
</div>

，最後CSS：

.container { 
    max-width: 960px; 
    z-index: 1; 
    position: relative; 
    padding:0; 
} 
.left { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    z-index: 1; 
    background: red; 
    height: 50px; 
    margin-left:-480px; 
} 

@media (min-width: 768px) { 
    .left { 
    margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/ 
    } 
} 

@media (min-width: 992px) { 
    .left { 
    margin-left:-480px; 
    } 
}

我希望這可以幫助別人，對不起，它這麼久只是想盡可能清楚地解釋邏輯。

來源

2014-04-19 15:26:27

混合液體和固定佈局 - 填寫動態空間

回答

相關問題