我的外部div背景不适用于我的内部div

时间:2014-07-09 18:02:09

标签: css

我有两个div嵌套在div中。我在外部div中设置我的背景,但它只适用于第一个内部div。我可以通过设置外部div的高度来解决问题,但每次修改内部div的高度时我都要改变高度。我的代码如下。任何帮助将不胜感激。

</head>
<style>
 .redgradient{
    background: linear-gradient(#f75d5d,#ed7878   );
}
#intro{
    float: left;
    padding-left: 20px;
    width: 400px;
}
 </style>

<body>
 <div class="container ">
     <div class="redgradient">
          <div >
             <h1>Kendall Ponder's Wonderful Life</h1><p />
          </div>
          <div id="intro">
               Here is some text.
         </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

只需将overflow: hidden;添加到包装器div

即可
.redgradient{
    background: linear-gradient(#f75d5d,#ed7878   );
    overflow: hidden;
}

选中此Demo

如果您从float移除#intro,那么它也可以。无需添加'overflow:hidden;'。

如果您想使用浮动元素,请务必clear正确使用它们。