三列css佈局+ Togglable之一

Question

我試圖在css中創建一個3列布局，可切換一個。下面的方案應該比文字更好地解釋它。

我想3列是全高。

• 在紅色：靜態寬度柱
• 在綠色：甲togglable菜單
• 在深綠色：被切換
• 在白後的菜單：主容器，其應填寫的其餘部分

頁我試着用下面的代碼，但沒有成功做到這一點：

<div id="header"></div> 
<div id="inline_container"> 
    <div id="left_menu"></div> 
    <div id="toggle_menu"></div> 
    <div id="main_container"></div> 
</div> 

而與此CSS代碼：

* {margin: 0; padding: 0;} 
.body {height: 100%; width: 100%;} 
#header {height: 70px; width: 100%;} 
#inline_container {height: 95%; width: 100%;} 
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;} 
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;} 
#main_container {height: 100%; width: 100%; display: inline-block; float: left;} 

Answer 1

Working FIDDLE Demo

爲了創建全高度頁，您需要一個包裝：

<div id="wrapper"> 
    <!-- MARKUP --> 
</div> 

，將填補整個頁面：

#wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

裏面我們wrapper，我們創建我們想要的元素：

<div id="wrapper"> 
    <div id="red"></div> 

    <div id="lime"> 
     <div id="green"></div> 
     <span class="close">[X]</span> 
    </div> 
    <div id="white"> 
     TEXT 
    </div> 
</div> 

注意，​​元素是lime元素的子元素。如果lime獲得類別collapsed，則將隱藏所有數據 ，並顯示​​。這裏是CSS：

#wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

#red { 
    float: left; 
    width: 200px; 
    height: 100%; 
    background: red; 
} 

#green { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 30px; 
    background: green; 
    display: none; 
    cursor: pointer; 
} 

#lime .close { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 20px; 
    height: 20px; 
    background: pink; 
    cursor: pointer; 
} 

#white { 
    height: 100%; 
    background: gray; 
} 

#lime { 
    position: relative; 
    float: left; 
    width: 200px; 
    height: 100%; 
    background: lime; 
    transition: width 0.5s; 
} 

#lime.collapsed { 
    width: 30px; 
} 

#lime.collapsed * { 
    display: none; 
} 

#lime.collapsed #green { 
    display: block; 
} 

而對於關閉和開放的lime元素，我們需要一些JS（我用的jQuery）：

$(function() { 
    $('#lime .close').on('click', function() { 
     $('#lime').addClass('collapsed'); 
    }); 

    $('#green').on('click', function() { 
     $('#lime').removeClass('collapsed'); 
    }); 
}); 

你可以看到最終FIDDLE Demo。

Answer 2

你要這樣呢？

http://jsfiddle.net/Kcfde/

我添加jQuery腳本顯示切換的效果，只要按一下綠色的股利。

基本上，當你設置float和width時，元素應該保持爲display: block，因爲它們會適合內容。