Container div忽略浮动元素的高度 [英] Container div ignores height of floated elements

问题描述

好吧，所以这看起来像一个真正的愚蠢的问题，但我不能让我的容器div继承浮动元素的高度。因为我需要中心的容器div，我不能使用float来解决这个问题。这是我的css：

Ok, so this seems like a really silly problem but I can't get my container div to inherit the height of the floated elements inside of it. Since I need to center the container div, I can't use float to fix this problem. Here is my 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 。

You are looking for the so-called clearfix.

这篇关于Container div忽略浮动元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！