1

そうです、ページのセクションがあります：

<div class="article">
    <div class="author">
        <img src="images/officers/john_q_public_thm.jpg" />
        <span class="name">John Q. Public</span>
        <span class="position">President</span>
    </div>
    <abbr class="postdate">
        <span class="month m-01">Jan</span>
        <span class="day d-31">31</span>
        <span class="year y-2009">2009</span>
    </abbr>
    <div class="content">
                <h2 class="title">Article Title</h2>
                <p>Pellentesque habitant morbi...facilisis luctus, metus</p>
                <p>Pellentesque habitant morbi...facilisis luctus, metus</p>
    </div>
</div>
<div class="article">...</div>
<div class="article">...</div>

およびdiv は左authorにabbrフロートされます。これらのdiv のarticleそれぞれは、兄弟から 5px ほど離す必要があります。ただし、authordiv は、div の技術的な「高さ」を超えています。floatmargin-bottomによってスペースが占有されているため、 は何もしていませんauthor。

これはちょっとイメージしにくいのでサーバーに置いてみました。

親を強制的にすべての浮動要素と少なくとも同じ高さにする方法はありますか?

誰かが私が言っていることを理解しているなら、ありがとう。

4

3 に答える 3

2

上記のハックに加えて、div に設定することもできますがoverflow:auto;、これらの div に設定してarticleいる他のルールによっては副作用が生じる可能性があります。ただし、HTML に要素を追加する必要がなくなります。

于 2010-04-06T22:54:56.980 に答える
1

これをdiv.articleの下部/内側に配置できます（divを閉じる直前）

<div style="clear:both;"></div>

または、次のようにします。

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
于 2010-04-06T22:44:07.477 に答える
0

フローティング要素の後にクリア要素を追加する必要があります。このようなものは通常<br clear="both"/>、左と右の両方のフロートをクリアし、含まれている要素を「パディング」します。

とを指定bothして、すべてのフローティング要素をクリアし、それに応じて左フローティングと右フローティングを指定できます。leftright

于 2010-04-06T22:38:24.673 に答える