フローティング画像を右にフローティングするCSSソリューション。

CSSのソリューションがあるかどうかを知りたいと思っています。コードは以下のようになっていて、右に浮かんでいる画像があるかもしれません。私は、テキストが画像の左端までしか流れないようにしたいので、テキストはそれらの下を流れず、ほとんどの場合、それ自身の列を形成するようになります。フローティング画像を右にフローティングするCSSソリューション。

<div class="content"> 
<h1>Page title</h1> 
<img src="path/to/image"> 
<p>Some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here</p> 
<p>More content here</p> 
</div>

場合によっては複数の画像が存在することもあれば、まったく存在しないこともあります。本質的に私は別の列/ divの代わりに純粋なCSSのソリューションがあるかどうか、そしてjsを避けているのだろうかと思っています。私はそれができないと感じている...！

さらに複雑なことには、すべての主要なブラウザ（urgh、ie6など）で互換性がなければなりません。

出典

2010-11-19 WastedSpace

.content p { overflow:[hidden|auto]; }

が有効です。

私はあなたが理解してみましょう：https://developer.mozilla.org/en/CSS/block_formatting_context;）

出典

2010-11-19 09:49:23 MatTheCat

私は、余分なdivを含めずにそれを行うための方法があるとは思いません。

解決策1：

<style> 
.content {margin:0 auto 0 auto; width:960px;} 
img {float:right; margin-bottom:100%;} 
</style> 
<body> 

<div class="content"> 
<h1>Page title</h1> 
<div> 
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%;"> 
<p>Aliquam eget dolor est, fringilla pellentesque magna. Integer suscipit, mauris at adipiscing tincidunt, ipsum libero sollicitudin nisi, tempus adipiscing nulla orci non neque. Aenean arcu leo, mattis sit amet cursus ac, imperdiet eget nulla. Proin porttitor, nulla a rutrum fringilla, ante turpis rhoncus tellus, eu rhoncus turpis massa quis mauris. Maecenas vehicula rutrum dolor sit amet placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eleifend; nisi eget facilisis gravida, magna ipsum faucibus ligula, eget commodo metus nibh vel sapien. Aliquam adipiscing erat non lorem cursus quis interdum nulla elementum. Cras ullamcorper magna non dui rutrum at consectetur libero rhoncus. Nunc nisi nulla, gravida quis convallis eu, molestie sit amet ipsum! Suspendisse potenti. Quisque gravida lobortis massa ac imperdiet. Duis tincidunt lorem pellentesque augue convallis luctus? Quisque purus dolor, aliquam hendrerit ultricies a, semper id tortor. Vestibulum sit amet sem ac magna posuere hendrerit id eu quam. Cras nec urna rutrum odio iaculis iaculis. Suspendisse lobortis pellentesque tristique. Duis felis purus, sodales nec euismod eu, congue et ipsum. Integer tincidunt semper orci, in mollis velit mattis eget. Fusce a tincidunt ante. 

Sed quam sem, lobortis vel consectetur id, vestibulum quis lorem? Vivamus ornare sagittis neque sit amet lacinia? Mauris molestie blandit eros, non gravida turpis feugiat nec. Integer pretium ligula sit amet justo iaculis auctor. Praesent lacinia tellus ut libero euismod eu ullamcorper mauris convallis? Ut posuere tempus elit a mollis. Quisque velit neque, vestibulum ac laoreet in, adipiscing at lorem. Sed velit arcu, sagittis et porta non, venenatis ut nisl. Nunc faucibus, orci sed bibendum tempus, purus ligula imperdiet nulla, non lacinia arcu mauris sit amet nunc. Etiam consectetur lectus id nibh facilisis porta. Nunc adipiscing scelerisque egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse euismod molestie nulla, sed suscipit lorem dapibus ac! Curabitur vel mauris justo. Sed urna eros, molestie ut sagittis et, pharetra non arcu! Proin vel nisi ante; at suscipit diam? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a lacus libero. Sed nec enim tellus, sit amet pulvinar dolor. 

Etiam rhoncus dapibus nibh, vitae adipiscing ante lacinia vel. Vivamus facilisis rutrum sem nec laoreet? Etiam non massa quis tortor euismod scelerisque. Nunc fermentum accumsan rhoncus? Duis ut neque eget nulla fringilla porttitor. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur fermentum, ipsum non ullamcorper consectetur, elit diam ullamcorper augue, vitae porta orci lorem nec dolor. Phasellus facilisis feugiat nisl eu consequat. Fusce sit amet dui eget libero congue rutrum. Phasellus sed sem quam, id aliquam leo? Cras massa dolor, laoreet rhoncus condimentum ut, varius in purus. In hac habitasse platea dictumst. 
</p> 
</div> 
</div> 

</body>

これは下に流れるテキストを防止する画像の下、大規模なマージンをドロップ。いくつかのブラウザではdivの高さを定義する必要があるかもしれません。

解決方法2：

<style> 
.content {margin:0 auto 0 auto; width:960px;} 
div.images {float:right; width:100px;} 
div.text {float:left; width:860px;} 
</style> 
<body> 

<div class="content"> 
<h1>Page title</h1> 
<div class="images"> 
    <img src="images/Chrysanthemum.jpg" style="width:100px;"> 
</div> 
<div class="text"> 
<p>Aliquam eget dolor est, fringilla pellentesque magna. Integer suscipit, mauris at adipiscing tincidunt, ipsum libero sollicitudin nisi, tempus adipiscing nulla orci non neque. Aenean arcu leo, mattis sit amet cursus ac, imperdiet eget nulla. Proin porttitor, nulla a rutrum fringilla, ante turpis rhoncus tellus, eu rhoncus turpis massa quis mauris. Maecenas vehicula rutrum dolor sit amet placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eleifend; nisi eget facilisis gravida, magna ipsum faucibus ligula, eget commodo metus nibh vel sapien. Aliquam adipiscing erat non lorem cursus quis interdum nulla elementum. Cras ullamcorper magna non dui rutrum at consectetur libero rhoncus. Nunc nisi nulla, gravida quis convallis eu, molestie sit amet ipsum! Suspendisse potenti. Quisque gravida lobortis massa ac imperdiet. Duis tincidunt lorem pellentesque augue convallis luctus? Quisque purus dolor, aliquam hendrerit ultricies a, semper id tortor. Vestibulum sit amet sem ac magna posuere hendrerit id eu quam. Cras nec urna rutrum odio iaculis iaculis. Suspendisse lobortis pellentesque tristique. Duis felis purus, sodales nec euismod eu, congue et ipsum. Integer tincidunt semper orci, in mollis velit mattis eget. Fusce a tincidunt ante. 

Sed quam sem, lobortis vel consectetur id, vestibulum quis lorem? Vivamus ornare sagittis neque sit amet lacinia? Mauris molestie blandit eros, non gravida turpis feugiat nec. Integer pretium ligula sit amet justo iaculis auctor. Praesent lacinia tellus ut libero euismod eu ullamcorper mauris convallis? Ut posuere tempus elit a mollis. Quisque velit neque, vestibulum ac laoreet in, adipiscing at lorem. Sed velit arcu, sagittis et porta non, venenatis ut nisl. Nunc faucibus, orci sed bibendum tempus, purus ligula imperdiet nulla, non lacinia arcu mauris sit amet nunc. Etiam consectetur lectus id nibh facilisis porta. Nunc adipiscing scelerisque egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse euismod molestie nulla, sed suscipit lorem dapibus ac! Curabitur vel mauris justo. Sed urna eros, molestie ut sagittis et, pharetra non arcu! Proin vel nisi ante; at suscipit diam? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a lacus libero. Sed nec enim tellus, sit amet pulvinar dolor. 

Etiam rhoncus dapibus nibh, vitae adipiscing ante lacinia vel. Vivamus facilisis rutrum sem nec laoreet? Etiam non massa quis tortor euismod scelerisque. Nunc fermentum accumsan rhoncus? Duis ut neque eget nulla fringilla porttitor. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur fermentum, ipsum non ullamcorper consectetur, elit diam ullamcorper augue, vitae porta orci lorem nec dolor. Phasellus facilisis feugiat nisl eu consequat. Fusce sit amet dui eget libero congue rutrum. Phasellus sed sem quam, id aliquam leo? Cras massa dolor, laoreet rhoncus condimentum ut, varius in purus. In hac habitasse platea dictumst. 
</p> 
</div> 
</div>

これはあなたのイメージを保持するために2つのdivを、1が必要ですが、右浮かべ一つは、あなたのテキストが左に浮いて保持します。どちらも定義された幅が必要です。唯一のCSSで

出典

2010-11-19 10:01:00

：

img { float: right; width: 100px} 
p { margin-right: 100px; } /* margin = image width */

は、ここではそれで遊ぶ：http://jsfiddle.net/SebastianPataneMasuelli/mPTRx/

P.S.を複数の画像を使用している場合は、img { float: right; clear: right; }

出典

2010-11-19 10:16:40

ニースの解決策セバスチャン –

ありがとう！ btw、margin-bottomも私の最初の考えでした。 –

"イメージなし"のシナリオは処理されません（100pxの空きスペースが必要ない場合）。 – kapa

ありがとうございました！

私はセバスチャンのコードを採用しましたが、右にギャップがあるとは限りませんので、jQueryが関与しなければならないと認めています。

ここで私はそれを解決方法は次のとおりです。

HTML（ところで、私はマークアップのいくつかのために完全に責任がないんだけど、それはすべてのWordpressのサイト内にある！）：

<div class="content"> 
    <h1>Title</h1> 
    <p><img src="blah" class="alignright"></p> 
    <p><img src="blah2" class="alignright"></p> 
    <h2>Sub title</h2> 
    <p>Some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here</p> 
    <p>More content here</p> 
</div>

のjQuery（の一部より複雑なコード）：

var $j = jQuery.noConflict(); // so no other plugins affect this in Wordpress 
$j(document).ready(function() { 
if($j('.alignright').length) { //this checks if an image exists 
     $j('.content').children().css('margin-right', '250px'); 
     $j('.alignright').parent().css({'float':'right','width':'230px','margin':'0px 0px 10px 0px','clear':'right'}); 
    } 
}

私はこれが誰かにとって便利だと願っています！感謝のセバスチャンの頭のために：

出典

2010-11-19 16:35:19 WastedSpace

うれしい！あなたはおそらく答えを受け入れるべきです！ –

フローティング画像を右にフローティングするCSSソリューション。

答えて

関連する問題