5

CSSフロートがDIVで使用されている場合、フロートされていない他のDIVは、フロートされたDIVのスペースを占有し続けます。これは意図的なものだと思いますが、探している効果を実現する方法がわかりません。この例を検討してください。

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red;border:thin black solid">Some sample text</div>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</html>

このHTMLをブラウザに貼り付ける（またはそのjsfiddleを調べる）と、「一部のサンプルテキスト」が赤で、赤い背景がフロートされたDIV全体に広がっていることがわかります。赤い背景の不要な部分を隠す方法があると確信していますが、それでも境界線が切り取られ、DIVの下に隠されたままになります。理想的には、背景色と境界線が有効なテキストスペースのみを占め、フローティングDIVの下に忍び寄らないようにする必要があります。この効果は可能ですか？

私はfloatプロパティを列の代わりとしてではなく、その周りにテキストが流れるブロックとして使用していることに注意してください。これまでのところ、提案されたソリューションはどれもこれを考慮していません。わかりやすくするために、ここにいくつかの画像があります。

これは私が得るものです：

悪い

これが私が欲しいものです：

良い

どちらの例でも、テキストが下部に到達すると、最終的なテキストがフロート部分を包み込むことに気付くでしょう。2番目の例は、「いくつかのサンプルテキスト」を含むdivの幅を直接指定することで実現できます。幅を指定したくありません。周囲のテキストと同じ幅が必要なので、冗長に見えます。しかし、おそらくそれは不可能ですか？

4

6 に答える 6

8

これが1つの解決策です：

<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>

基本的にここでの魔法はoverflow: hidden、CSSの視覚的なフォーマットモデルを変更することです。CSSレイアウトの基本、パート5を見てください：floats：

隣接するボックスの修正

まず、赤い段落の境界線の問題を見てみましょう。段落の境界線が画像の後ろに表示される理由は、フロートが隣接するブロックボックスを再配置しないためです。この例では、フロートされた画像は段落内のラインボックスを押しているだけです。したがって、テキストは右にプッシュされますが、実際の段落ボックスはコンテナの幅全体に広がります。

この問題の修正は 、CSS2.1仕様のfloatsセクションの非常によく隠された段落から来ています。

テーブルの境界ボックス、ブロックレベルで置き換えられた要素、または新しいブロックフォーマットコンテキストを確立する通常のフローの要素（「visible」以外の「overflow」を持つ要素など）は、要素自体と同じブロックフォーマットコンテキスト。

したがって、段落ブロックがフロートされたコンテンツと重複しないようにするための解決策は、CSS仕様の作成者の用語で「新しいブロックフォーマットコンテキスト」を作成することです。トリッキーに聞こえますね？幸いなことに、それはそれほど難しいことではありません。新しいブロックフォーマットコンテキストは、次の条件を満たす任意のブロックによって作成されます。

  • 浮かんでいる
  • 絶対に配置されています
  • 1つ以上の珍しいフレーバー（インラインブロック、テーブルセルなど）の表示プロパティ値があります
  • オーバーフロープロパティが表示以外に設定されています。

最後のオプションは、ほとんどの場合に最も簡単なオプションです。オーバーフローを設定します。段落を自動に設定すると、新しい「ブロック書式設定コンテキスト」が作成され、段落の境界線が適切な場所にレンダリングされます。

于 2009-10-14T15:42:00.210 に答える
5

spanとそのようなスタイルを追加した場合div（もちろん、私は通常、インラインスタイルを使用しません）：

<div style="overflow: hidden;">
  <span style="background-color:red;
               border:thin black solid;
               display: inline-block;">
   Some sample text
   </span>
</div>

次に、このフィドルに表示されるこの効果を得ることができます。それ自体は、長いテキスト文字列の行の折り返しに対応するためのものであることoverflow:hiddenに注意してください。div

于 2013-04-14T01:24:53.610 に答える
4

これは私が望んでいた方法では不可能なようです。Cletusが説明したように、「それを許可するものはありません。テキストを右のフロートに折り返すことはできますが、ブロック要素も右に拡張されます。ブロック要素は、定義上、正方形であり、上部に正方形が必要なようです。右の切り抜きとその線に沿った境界線。それはできません。」

（私はCletusの回答に賛成しましたが、将来のGoogle社員はすぐに失望するはずなので、正しい「回答」としてマークしたくありませんでした。）

于 2010-11-24T16:56:50.047 に答える
2

もう一方の列をfloatleftとして指定する必要があります。あなたが今それを持っている方法は、左側のテキストが右側のフロートされたテキストをラップすることです。左側のフロートオブジェクトのサイズも指定するのが賢明です。

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim  veniam.</div>

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red; width: 250px; border:thin black solid">Some sample text

     Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></div>

</html>

また、CSSの使用を検討してください。これにより、このコードを長期間維持するのがはるかに簡単になります<<

編集：私はあなたがすべてを左に浮かせたいと思ったと思いました私はあなたの質問を誤解したと思います。あなたがしようとしていることは不可能です。最善の方法は、右に浮かぶオブジェクトのマージンを400〜150（250px）に指定するか、「テキスト」オブジェクトの幅を（250px）に指定することです。

于 2009-10-14T15:40:58.240 に答える
0

私はあなたがする必要がある唯一のことがあると思います：

  • 「サンプルテキスト」divに、右に浮かぶ要素の幅よりも大きい右マージンを指定します

それはそれをする必要があります。

編集：編集に基づいて、div（ブロック要素）の代わりにスパン（インライン要素）を使用することをお勧めします。常に別の行に配置する必要がある場合は、その要素とその後の要素の両方にclear：leftを指定できます。

于 2009-10-14T15:40:35.197 に答える
0

私はこの質問をとても遅く知ったので、とにかく私はあなたの問題を修正しています。このフィドルを見る

定義する必要がありますdisplay: table;

このように：

<div style="background-color:red;border:thin black solid;display: table;">Some sample text</div>

注 display: block;はとして機能せずdisplay: table;、使用することもできますdisplay: table-cell;

あなたはこの質問も好きかもしれません：cssinline-block vstable-cell

于 2013-04-19T15:32:58.907 に答える