これを行う最良の方法は、実際にはこれかもしれないと思います(まあ、私は最善を言います、ほとんどの場合、それは意見の問題だと思います)
HTML:
<div class="container">
<div class="outside">
hi
</div>
<div class="inside">
<p>Blah blah blah</p>
</div>
</div>
CSS:
.container { margin: 20px auto; width: 400px; }
.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }
明らかに、同じページでこれを複数回繰り返すことができます(これがブログ投稿の場合は可能だと思います)
編集:私の答えはfloats
、通常のフローから要素を取り出すために使用しますoverflow: hidden
。コンテンツでの使用は、フローティング要素の下にラップしないことを意味します。
(よくわからない場合は、それについて読むことoverflow
をお勧めします。フロートのクリアなど、あらゆる種類のことに役立ちます)