如何使用'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'创建响应式网页布局？

回答

相关问题