html - 如何使用 'display:inline-block' 创建响应式网页布局？

Question

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

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

在我放弃 float div 之后，我开始阅读很多关于使用 display:inline-block 的内容。例如here .这似乎比 float 效果好得多，但有些问题我无法解决。

• 现在在大窗口中它工作正常。但是，如果我将窗口的大小调整为较小的尺寸，布局就会开始中断。我知道这是因为侧边栏是固定的，但主要是百分比。因此，当窗口变小时，留给侧边栏的空间也会减少。我怎样才能“告诉”主 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 block 之后，否则大部分设置将被您在样式表中较低的设置所取代。

最后，要删除窄视口(viewport)的侧边栏，您需要使用 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%;
    }
}