容器 div 忽略浮动元素的高度
好吧,这看起来是一个非常愚蠢的问题,但我无法让我的容器 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>
有什么想法吗?
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>
Any ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您正在寻找所谓的 clearfix 。
You are looking for the so-called clearfix.