子 div 根本没有出现。出现 div 中的文本答案

【问题标题】：Child div isn't appearing at all. Text within div is appearing子 div 根本没有出现。出现 div 中的文本
【发布时间】：2014-07-16 01:05:21
【问题描述】：

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

我的问题是第一个 div 中的文本会出现（尽管占据了整个 900 像素），但 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;
}

【问题讨论】：

你有一个未关闭的@media query '@media screen and (max-width: 768px) {'需要在#leftpanel之前关闭。
谢谢吉姆！你让我头疼了
作为建议，请尝试将您的代码制成表格...与其他 css 相比，此 css 很小...始终将您的代码制成表格：-D 祝您好运！！

标签： html css overflow

【解决方案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;
}

【讨论】：

【解决方案2】：

你的 css 中没有关闭它

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

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

【讨论】：

【解决方案3】：

在左右面板中添加overflow:hidden

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

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

别忘了关闭你的媒体查询。

祝你好运！

【讨论】：

【解决方案4】：

好的，这里有几件事 -

您需要关闭媒体查询。这就是为什么 CSS 代码底部的左右面板规则无法正常工作的原因。关闭它，然后将规则移到页面顶部以获得更清晰的代码（我将它们放在容器下方，但我想这是个人喜好）。其次，左侧面板周围的边框阻止并排放置的两个框 - 这样做并添加 float:right; 到 rightPanel CSS。应该没问题。

灰

【讨论】：