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テキストを含む円を下に拡大して、画像と同じ高さにするにはどうすればよいですか？両方を共通の親に配置しましたdivが、使用しようとした属性やスタイルに関係なく、展開されませんでした。

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 に答える