如何使用"display：inline-block"创建响应式网页布局？

Question

我想从头开始创建一个简单的响应网页，只需要一个html和一个css文件。这只是一个简短的练习，但事实证明我低估了复杂性。

布局很简单。页眉、主页、侧边栏和页脚。边栏应该有一个固定的宽度，主要内容应该使用其余的水平空间。如果屏幕宽度低于480px，侧边栏应该会消失。菜单图标甚至还没有计划好；我只想侧边栏消失，然后主要内容使用100%的空间。

在我放弃使用浮动div之后，我开始阅读大量关于为此目的使用display:inline块的内容。例如这里。这似乎比浮动要好得多，但有些问题我无法解决。

• 在一个大窗口中，它现在运行良好。但是，如果我将窗口调整到较小的大小，布局就会开始中断。我知道这是因为侧边栏是固定的，但主要是百分比。因此，当窗口变小时，留给侧边栏的空间也会减少。如何"告诉"主div始终"填充其余空间"？

• 让侧边栏消失的媒体查询是有效的，但它留下了一个空白。我不明白为什么它不根据我的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;
}

Answer 1

看看这个：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%;
}
}

Answer 2

。。。尽管我太累了，无法阅读您的所有代码，但以下是您的解决方案：

<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/