私には困惑があります。CSS が本来の動作をしているように見えるアプリケーションがありますが、期待どおりの結果が表示されず、「期待される」結果を得るための解決策が見つかりません。問題は、コンテンツの左側に float 要素があり、コンテンツ スタイルでパディングまたはマージンが使用されている場合に、コンテンツがどのように流れるかです。
私のアプリケーションでは、ユーザーは DIV にテキストを入力できます。float left 要素がある場合とない場合があるため、テキストを含む div は body 領域の左側に配置するか、右に移動できます (つまり、float 要素の後)。
フローティング要素がない場合、テキストは、左、インデント、最初の行のインデント、またはぶら下がっている段落 (つまり、div と適切なクラス) で問題ありません。
段落の CSS は次のとおりです。
.firstindent { text-indent:30px; }
.indent { padding-left:30px; }
.hanging { padding-left:30px; text-indent:-30px; }
ただし、float left 要素が追加されると、標準インデントと最初のインデントのみが正しく表示されます。これは、パディング、ボーダー、およびマージンがボックス モデルの「コンテンツ」の外側にあり、「コンテンツ」領域内のアイテムのみがフロートに合わせて調整されるためです。
浮きます。フロート モデルでは、ボックスは最初に通常の流れに従って配置され、次に流れから取り出され、可能な限り左または右にシフトされます。フロートの側面に沿ってコンテンツが流れる場合があります。
Firebug で Firefox を使用している場合、div を強調表示すると、パディングが左端、つまり浮動要素の「下」に表示され、浮動要素の右側に調整されていないことがわかります。
その結果、float left 要素を持つ段落は次のようになります。
(float 要素はリストの表示にも影響することに注意してください。)
これまでのところ、メイン テキストのコンテンツを設定し、左側に float left 要素があるかどうかに関係なく適切に表示できるようにする CSS ソリューションを思い付くことができませんでした。
完全な HTML サンプルを投稿しましたので、お気軽にソースを入手して、解決策を見つけられるかどうかを確認してください。サンプルページ
ありがとう - 「あなたが期待するもの」を含めるべきでした。こちらがフロート左とフロート左スペーサーです。
