html - 子 div 根本没有出现。出现 div 中的文本

Question

我正在尝试使用两个相邻 float 的 div 将我的页面分成两个“列”。容器宽度为 900px，左列应为 400px，右列应为 500px。

我的问题是第一个 div 中的文本会出现(尽管占据了完整的 900px)但是 div 本身没有显示存在的迹象，即使我应用了边框或背景颜色。右边的 div 也是如此。

HTML:

<div id="container">       
    <div id="leftpanel">
        <h1>Left Panel Title Here</h1>
        <p>Summary text goes underneath to draw attention to the
           video on the right</p>
    </div>

    <div id="rightpanel">
        <p>123 123</p>
    </div>

     <div id="content"><p>text to expand page</p>
    </div>

    <div id="columna">
    </div>

    <div id="columnb"></div>

    <div id="footer">
    </div>

CSS:

    body{
    margin: 0px;
    padding: 0px;
    background-color:#333;}

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
    h1{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;}

    p{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;}

    #container{
    width: 900px;
    overflow:hidden;
    margin-top: 0px;
    padding: 0px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;}

     #header{
    width: 900px;
    height: 200px;}

    #cssmenu {
    background: #f96e5b;
    width: auto;}

    #cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    zoom: 1;}

    #cssmenu ul:after {
     content: ' ';
     display: block;
     font-size: 0;
     height: 0;
     clear: both;
     visibility: hidden;}

     #cssmenu ul li {
     display: inline-block;
     padding: 0;
     margin: 0;} 

     #cssmenu.align-right ul li {
     float: right;}

     #cssmenu.align-center ul {
     text-align: center;}

     #cssmenu ul li a {
     color: #ffffff;
     text-decoration: none;
     display: block;
     padding: 15px 25px;
     font-family: 'Open Sans', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 14px;
     position: relative;
     -webkit-transition: color .25s;
     -moz-transition: color .25s;
     -ms-transition: color .25s;
     -o-transition: color .25s;
     transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }

#leftpanel{
    width: 400px;
    float:left;
    border:solid;}

#rightpanel{
    width: 500px;
}

Answer 1

用关闭媒体查询试试这个 CSS 样式:

   body{
    margin: 0px;
    padding: 0px;
    background-color:#333;}

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
    h1{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;}

    p{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;}

    #container{
    width: 900px;
    overflow:hidden;
    margin-top: 0px;
    padding: 0px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;}

     #header{
    width: 900px;
    height: 200px;}

    #cssmenu {
    background: #f96e5b;
    width: auto;}

    #cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    zoom: 1;}

    #cssmenu ul:after {
     content: ' ';
     display: block;
     font-size: 0;
     height: 0;
     clear: both;
     visibility: hidden;}

     #cssmenu ul li {
     display: inline-block;
     padding: 0;
     margin: 0;} 

     #cssmenu.align-right ul li {
     float: right;}

     #cssmenu.align-center ul {
     text-align: center;}

     #cssmenu ul li a {
     color: #ffffff;
     text-decoration: none;
     display: block;
     padding: 15px 25px;
     font-family: 'Open Sans', sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 14px;
     position: relative;
     -webkit-transition: color .25s;
     -moz-transition: color .25s;
     -ms-transition: color .25s;
     -o-transition: color .25s;
     transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}

#leftpanel{
    width: 400px;
    float:left;
    border:solid;}

#rightpanel{
    width: 500px;
}