Question

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

布局简单。标题，主要，侧边栏和页脚。边栏应具有固定宽度，主要内容应使用水平空间的其余部分。如果屏幕宽度低于480px，侧边栏应该消失。菜单图标甚至还没有计划好;我只希望侧边栏消失，主要内容随后使用100％的空间。

在我放弃了浮动div之后，我开始阅读很多关于使用display：inline-block的内容。例如here。这似乎比浮动更好，但有些问题我无法解决。

在一个大窗口中它现在正常工作。但是如果我将窗口调整到更小的尺寸，布局就会开始破坏。我知道这是因为侧边栏是固定的，但主要是百分比。因此，当窗口变小时，留给侧边栏的空间也减小。我如何“告诉”主要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

...虽然我太累了，无法阅读您的所有代码，但这是您的解决方案：

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

Answer 2

检查出来：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%;
    }
}

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

2 个答案: