这是一个 SSCCE 来展示我的问题:
<html>
<head>
<title>SSCCE for problem</title>
<style type="text/css">
h1 {font-size: 2em;}
h5 {font-size: 1.3em; margin: 1em;}
</style>
</head>
<body style="text-align: center;">
<div style="background-color: #C0C0C0;">
<div style="background-color: #B0B0B0; float:left; padding: 1em;"><h1 style="">Welcome to<br/><img src="http://www.oddllama.cu.cc/logo.png" alt="OddLlama Productions"
title="Welcome to OddLlama Productions!"/></h1>This is some sample text.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in est non dui dictum eleifend. Proin tempor sodales odio, vitae laoreet orci vehicula blandit.
Curabitur vitae tellus odio, nec vehicula leo. Nam ac urna nisi, eget molestie dui.</div>
</div><br/>
<span style="width: 25%; float: left; clear: left; background-color: #D0D0D0"><p>
<h5>SOMETHING</h5>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>
</span>
<span style="width: 50%; float: left; background-color: #DDDDDD">
<h1>SSCCE</h1>
<p>This is an SSCCE.</p>
<p>Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.<br/>Praesent in est<br/>non dui dictum eleifend.<br/>Proin tempor<br/>sodales odio,<br/>vitae
laoreet orci<br/>vehicula blandit.<br/>Curabitur vitae<br/>tellus odio,<br/>nec vehicula leo.<br/>okay good enough.</p>
</span>
<span style="width: 25%; float: left; background-color: D0D0D0"><p>
<h5>More stuff!</h5>
<p>I'll just put a bunch of line breaks to take up space<br/><br/><br/><br/><br/><br/><br/><br/>okay good</p>
</span>
<p style="clear: both;"><br/>THIS IS A THING AT THE BOTTOM it is a footer yay footers are footery and footeriness is footy okay why am I typing this this is awkward but
I must take up more space spaciness is spacey<br/><br/>okay good</p>
<br/><div style="padding: 10px;"></div><hr/><div style="padding: 10px;"></div>
</body>
</html>
这是它如何呈现的图像:
如何使包含文本的带圆圈的 div 向下扩展，使其与带有图像的高度相同？我将它们放在一个共同的父 div 中，但无论我尝试使用什么属性或样式，它都不会向下展开。
是否有 expand: down CSS 东西，或者我可以用来使我的文本向下扩展的其他替代方法？
最佳答案
不幸的是，CSS 中没有 expand:down 属性 :) 但你确实有一些选择。最常见的解决方案是使用 .clearfix 方法。
当您 float 一些子元素时，父元素(容器)不会影响那些 float 子元素的高度。这就是您需要添加 clearfix 类的地方。
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
PS:它也兼容非常旧的 IE 版本!
关于html - "Expand down"HTML/CSS 或替代，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15490233/