【问题标题】:Container div ignores height of floated elements [duplicate]容器 div 忽略浮动元素的高度
【发布时间】:2011-01-27 10:16:11
【问题描述】:

好的,所以这似乎是一个非常愚蠢的问题,但我无法让我的容器 div 继承其中浮动元素的高度。由于我需要将容器 div 居中,因此无法使用 float 来解决此问题。这是我的CSS:

#container {
margin: 0 auto;
width: 1000px;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}

#focus {
padding-left: 23px;
width: 977px;
padding-top: 20px;
padding-bottom: 23px;
border-bottom: 1px solid #f1f1f1;
float: left;
}

.rslider {
float: left;
width: 600px;
margin-left: 15px;
}

.welcome {
float: left;
width: 300px;
}

HTML:

<div id="container">
   <div id="logo_block">
   <a href="#"><img src="img/logo.jpg" alt="" /></a>
   </div>
   <div id="focus">
    <div class="welcome">
    <h1>All About This Page</h1>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, liquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    </div>
   <div class="rslider">
    <img src="img/slider_image.jpg">
   </div>
   </div>
  </div>

有什么想法吗?

【问题讨论】:

    标签: css html css-float


    【解决方案1】:

    您正在寻找所谓的clearfix

    【讨论】:

    • 我知道在某些情况下无法使用的其他方法(例如包装元素上的overflow:hiddenfloat),但这解决了我的问题
    猜你喜欢
    • 2021-04-01
    • 2014-03-30
    • 1970-01-01
    • 2014-03-29
    • 2012-11-06
    • 1970-01-01
    • 2011-02-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多