儿童div根本没有出现。 div中的文字正在出现

Question

我正在尝试将我的页面分成两个“列”，使用两个彼此相邻的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;
}

Answer 2

你的css中有这个未公开的

@media screen and (max-width: 768px) {

尝试关闭它并检查它是否有效......

Answer 3

在左侧和右侧面板中添加overflow:hidden

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

#rightpanel{
    overflow:hidden;
    width: 500px;
}

不要忘记关闭媒体查询。

祝你好运！

Answer 4

好了这里的一些事情 -

您需要关闭媒体查询。这就是为什么CSS代码底部的左右面板规则无法正常工作的原因。如此接近，然后将规则移到页面顶部以获得更清晰的代码（我把它们放在容器下面，但我猜这是个人偏好）。其次，左侧面板周围的边框将两个框并排放置 - 这样做并添加浮动：右边; 到右侧面板CSS。应该都很好。

灰