如何使用'display：inline-block'創建響應式網頁佈局？

我想從頭創建一個簡單的響應式網頁，只需一個html和一個css文件。這只是一個簡短的練習，但事實證明我低估了複雜性。如何使用'display：inline-block'創建響應式網頁佈局？

佈局很簡單。標題，主要，側欄和頁腳。側欄應該有固定的寬度，主要內容應該使用其餘的水平空間。如果屏幕寬度低於480像素，邊欄應該消失。菜單圖標甚至還沒有計劃;我只希望邊欄消失，並且主要內容隨後使用100％的空間。

在我放棄浮動div之後，我開始閱讀很多關於使用display：inline-block來達到這個目的。例如here。這看起來比浮動效果好得多，但有些問題我無法解決。

在一個大窗口中，它現在工作正常。但是，如果我將窗口大小調整爲較小，則佈局開始打破。我知道這是因爲側欄是固定的，但主要是百分比。因此，當窗口變小時，爲側欄留下的空間也會減少。我怎樣才能「告訴」主分區始終「填補剩下的空間」？
媒體查詢，使側欄消失的作品，但它留下的空白。我不明白爲什麼它不根據我的CSS文件調整大小。

這是我的HTML和CSS代碼：

<div id="wrapper"> 
     <div id="header"> 
      <img src="logo.jpg" alt="Smiley face" style="height:15%;width:50%;"> 
     </div> 
     <div id="mainWrap"> 
      <div id="sidebar"> 
       Sidebar 
      </div> 
      <div id="main"> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed; 
       Main 
      </div> 
     </div> 
     <div id="footer"> 
      Footer 
     </div> 
    </div>

這是我的CSS文件：

@media screen and (max-width:480px){ 

#sidebar { 
visibility:hidden; 
width:0; 
} 
#main{ 
    width:100%; 
} 

#mainWrap{ 
font-size:0; 
} 
#header{ 
color:white; 
margin-bottom:4em; 
} 


#sidebar{ 
font-size:12px; 
width:25%; 
vertical-align:top; 
display:inline-block; 
} 

#main{ 
font-size:12px; 
width:75%; 
display:inline-block; 
vertical-align:top; 

} 

#footer{ 
    font-size:12px; 
    border-style: solid; 
}

來源

2014-02-28 nst1nctz

檢查了這一點：http://jsfiddle.net/panchroma/Bjh35/

的HTML是一樣的你，在CSS中一些重要的變化。

首先，你有一個語法錯誤，並沒有關閉

@media screen and (max-width:480px){ 
.... 
} <==== you forgot this curly brace

其次，你需要把媒體查詢你的主要CSS塊之後，否則大部分的設置將被你替代在樣式表中較低。

最後，在窄視清除邊欄，您要使用display:none;你visibility: hidden;它只是隱藏的元素，但它仍然佔用空間在頁面上

希望這有助於！

CSS

#mainWrap{ 
font-size:0; 
    background-color:#aaa; 
} 
#header{ 
color:white; 
margin-bottom:4em; 
    background-color:#ddd; 
} 


#sidebar{ 
font-size:12px; 
width:25%; 
vertical-align:top; 
display:inline-block; 
    background-color:pink; 
} 

#main{ 
font-size:12px; 
width:75%; 
display:inline-block; 
vertical-align:top; 
    background-color:olive; 

} 

#footer{ 
    font-size:12px; 
    border-style: solid; 
    background-color:#ffc; 
} 

@media screen and (max-width:480px){ 

    #sidebar { 
     display:none; 
    } 

    #main{ 
     width:100%; 
    } 
}

來源

2014-02-28 00:56:15

哇，謝謝，很容易，但很難找到，所有的這彙集的地方。 – nst1nctz

@ user3025256>，但很難找到一個將所有這一切結合在一起的地方。 ...你的意思是你想知道如何處理你的具體示例文件，或者你是否在考慮一般的響應式網頁設計？ –

...雖然我太累了，讀所有的代碼，這裏是你的解決方案：

<div class="container"> 
    <div class="sidebar"> 
    sidebar here 
    </div> 

    <div class="content"> 
    content here 
    </div> 
</div 

<style> 
.container { 
    width:100%; 
} 
.sidebar { 
    background:red; 
    position:fixed; 
    width:200px;  
} 
.content { 
    position:relative; 
    display:block; 
    background:green; 
    margin-left:220px;  
} 
@media (max-width:480px) { 
.sidebar { 
    display:none; 
    } 
    .content { 
    margin-left:0;  
    }  
} 
</style>

http://jsfiddle.net/D78G2/1/

來源

2014-02-28 00:50:08 scooterlord

如何使用'display：inline-block'創建響應式網頁佈局？

回答

相關問題