css - 容器 div 忽略 float 元素的高度

标签 css html css-float

<分区>

好吧,这似乎是一个非常愚蠢的问题,但我无法让我的容器 div 继承其中 float 元素的高度。因为我需要将容器 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>

有什么想法吗?

最佳答案

你在找所谓的clearfix .

关于css - 容器 div 忽略 float 元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2442934/

相关文章:

jquery - 获取 div 的子值

javascript - 在跨度类上显示图标

css - 使用CSS将4个div与动态高度对齐

css - 如何覆盖内联样式

html - 相同的标签,不同的属性 (HTML/CSS)

html - 如何在 css 中将没有 ID 的 <p> 隐藏在具有 ID 和 Class 的 div 中?

css - 如何获得最小宽度行为(例如 float 或 pos : abs) without using a float or pos: abs 时

html - DIV 随机移动

html - 如何隐藏支持 HDR 的显示器上的某个部分

html - Chrome 在少数情况下不遵循@media 打印规则