1つのブロックをフローティングイメージの周りにラップさせないようにするにはどうすればよいですか？

Question

は、次の画像を検討してください。

これは<img>タグフローティング状態の結果を示しています。余白はすべて解決されているわけではありませんが、<h1>タグは折り返しています。 <table>タグの幅がそれほど広くない場合は、以下の本の概要もラッピングされます。私はそれらの要素を包み込みたい。

しかし、私は<table>タグの内容をラップすることは望ましくありません。ラップすると、上の図のように完全なブロックとしてラップされます。これは単なる長すぎる「ジャンル」ラベルの一握りの問題です。より短い「ジャンル」ラベルが使用されると、ブロックは黄褐色の容器の上部に当たり、すべてが良好に見えます。強制的に私はテキストサイズを減らすことができますが、私は本当にしたくないです。純粋に審美的な理由から、テーブルはと表の左側を<img>の場合はposition:relative;のように<img>になることがあります。これは可能ですか？

基本的なHTML

<h1>Title Text</h1> 
<table>...</table> 
<div>Lorem Ipsum...</div> 
<img> 

既存のCSS

img{ float:left; } 

GOAL：

できるようにするには<h1>と例えば、<img>がfloat:left;の場合と同じように内容が囲まれ、がposition:relative;である場合と同様に<table>の内容が<img>を下回るように内容が変更されます。

残念ながら、私は一緒にpositionとfloatの両方を使用してみました。それはうまくいかなかった。 <clear>は、浮動オブジェクトにのみ適用されます。

理想的には（このような不具合が存在すると仮定して）、私はignore-float:trueタイプのソリューション、またはばかばかしい複雑な妥協を望みます。これは可能ですか？

Answer 1

あなたのHTMLマークアップの現在の順序で、あなたが探しているものは、私が知る限り、これはできません。画像とテーブルの周りに別のdivを追加してdiv自体を浮動させると、テーブルは画像の下に残り、他の要素はそれらの周りを包み込みます。

<h1>Header</h1> 
<div class="image-wrap"> 
    <img src="..." alt="" /> 
    <table> ... </table> 
</div> 
<p>Paragraph text</p> 

とあなたのCSSのために：

.image-wrap { float: left; max-width: 200px; } 
.image-wrap img { display: block; }