solution CSS pour les images flottantes à droite mais sans texte qui coule sous

Je voudrais savoir s'il y a une solution avec CSS où j'ai le code comme ci-dessous, et il peut ou ne peut pas être une image flottante à droite. Je veux que le texte ne circule que jusqu'à la gauche de l'image (s), de sorte que le texte ne coule pas en dessous d'eux, presque comme si elle formait sa propre colonne. Parfois, il peut y avoir plus d'une image (juste après l'autre), ou rien du tout. Essentiellement, je me demande s'il existe une solution css pure au lieu de séparer les colonnes/divs (et d'éviter js). J'ai le sentiment que ce n'est pas possible ...!solution CSS pour les images flottantes à droite mais sans texte qui coule sous

Et pour compliquer encore les choses, il doit être compatible dans tous les principaux navigateurs (y compris, urgh, IE6).

Source

2010-11-19 WastedSpace

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

devrait fonctionner.

je vous laisse essayer de comprendre: https://developer.mozilla.org/en/CSS/block_formatting_context;)

Source

2010-11-19 09:49:23 MatTheCat

Je ne pense pas qu'il y ait un moyen de le faire sans inclure divs supplémentaires.

Solution 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>

Cette gouttes une marge énorme sous l'image qui empêche le texte de couler en dessous. Vous devrez peut-être définir une hauteur pour la div dans certains navigateurs.

Solution 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>

Cela nécessite 2 divs, une pour tenir vos images flottaient à droite et un à tenir votre texte flottais gauche. Les deux ont besoin d'une largeur définie.

Source

2010-11-19 10:01:00

avec seulement css:

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

jeu avec ici: http://jsfiddle.net/SebastianPataneMasuelli/mPTRx/

P.S. si vous utilisez plus d'une image, utilisez img { float: right; clear: right; }

Source

2010-11-19 10:16:40

solution de Nice Sebastian –

mat merci! btw, le margin-bottom était aussi ma première pensée. –

Ne traitera pas le scénario "pas d'image" (si nous ne voulons pas d'espace vide de 100px). – kapa

Merci les gens!

J'ai adapté le code de Sebastian, mais a concédé que jQuery doit être impliqué, car je ne veux pas toujours qu'il y ait un écart sur la droite.

Voilà comment je l'ai résolu:

HTML (BTW je ne suis pas entièrement responsable de certains des balises, il est tout dans un site 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 (partie de code plus complexe):

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'}); 
    } 
}

J'espère que cela est utile à quelqu'un! Merci Sebastian pour le heads up :)

Source

2010-11-19 16:35:19 WastedSpace

heureux que cela a fonctionné! vous devriez probablement accepter la réponse! –

solution CSS pour les images flottantes à droite mais sans texte qui coule sous

Répondre

Questions connexes