1

这是一个 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>

这是它如何呈现的图像：

http://i.imgur.com/4LFzV4I.png

如何使div包含文本的圆圈向下扩展，使其与带有图像的圆圈高度相同？我将它们都放在一个共同的 parentdiv中，但是无论我尝试使用什么属性或样式，它都不会向下扩展。

有没有expand: downCSS 的东西，或者我可以用来让我的文本向下扩展的替代方法？

4

1 回答 1

1

不幸的是，CSS 中没有 expand:down 属性 :) 但是您确实有一些选择。最常见的解决方案是使用 .clearfix 方法。

当您浮动一些子元素时，父（容器）不会影响这些浮动子元素的高度。这就是您需要添加 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 版本！

于 2013-03-19T04:14:07.293 回答