web-dev-qa-db-ja.com

フローティング要素の周りに境界線を置く

次のコードのように、左右に浮かんでいる2つの画像の間にテキストを表示したいとします。

<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>

2つの画像とテキストの周囲に境界線を追加したいと思います。上記の3つのタグすべてに<div>を付けて、style="border:2px black solid;"を使用してみました。これにより境界線が追加されますが、画像は考慮されていないようです。つまり、次のようなものが得られます（StackOverflowとGoogleロゴを使用）。

enter image description here

フローティング要素が<div>の一部と見なされていないため、これが発生していると思います。私はソフトウェア開発者であり、Web開発者ではないため、CSSの専門家ではありません。しかし、フローティング要素はある意味で「無視」されていることを思い出します。誰かが何が起こっているのか、そしてそれを修正する方法の詳細な説明を与えることができますか？

cssbordercss-float
27
Snowy Coder Girl

この場合、値がoverflowまたはhiddenのautoを追加すると、問題が解決します。

以下のフィドルを確認してください。

http://jsfiddle.net/XMrwR/

クリアするとオーバーフローウェイがフロートします

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

41
xandercoded

CSSでは、float要素はデフォルトで親に高さを追加しません。

解決策は、単にoverflow: hiddenを設定することです。

<div style="border: 2px solid black; overflow: hidden;" 
    <img src="testImage1.png" alt="Test Image 1" style="float:right;" />
    <img src="testImage2.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

フィドル： http://jsfiddle.net/JNets/

12
benesch

この行をCSSプロパティに追加します。

overflow: hidden
7
Kelvin Farrell