CSS - faire du paragraphe habillage de texte autour de l'image sans flotteur

Je peux simplement utiliser float pour réaliser l'habillage de texte autour de <img> élément et je comprends que <img> est un élément inline et  est un élément de niveau bloc, afin de les faire en ligne, je dois soit faire  un élément inline ou de l'utilisation  à la place.

Le truc, c'est que si je les traite tous comme des éléments inline, il laisse un immense espace blanc à côté de l'image et sur le haut du texte.

Je voudrais savoir quelles sont les causes de l'espace vide.

Voici mon JS Fiddle

img est, par défaut, inline-block, pas inline. C'est pourquoi vous pouvez spécifier la largeur et la marge dans le CSS.
Merci. Je ne connaissais pas <img> être inline-block pas inline. Mais encore, même si je spécifier la largeur et la hauteur de la <img>, il ne résout pas le problème.
Pouvez-vous mettre des img dans un div et textes dans d'autres div, et d'appliquer display:inline pour les deux divs?

InformationsquelleAutor Seong Lee | 2013-11-20

css

10

Cette question semble être préoccupé par le pourquoi, le comment, donc je vais me concentrer sur les rouages:

La Modèle de formatage visuel section de la CSS 2.1 spec décrit le formatage en ligne contextes:

Dans un formatage en ligne contexte, les boîtes sont disposées horizontalement, l'un après l'autre, en commençant par le haut d'un bloc contenant. Marges horizontales, les frontières, et les garnitures sont à respecter entre ces zones. Les boîtes peuvent être alignés à la verticale de différentes manières: leur fond ou tops peuvent être alignés, ou les lignes de base du texte à l'intérieur d'eux peuvent être alignés. La zone rectangulaire qui contient les cases qui forment une ligne est appelée ligne de la boîte.

La propriété qu'ils décrivent est vertical-align qui prend un certain nombre de valeurs différentes, baseline étant la valeur par défaut. C'est pourquoi vos deux inline éléments apparaissent comme ils le font, par assis sur la ligne de base. Vous pouvez modifier l'  à vertical-align: top, et le haut de la première ligne de texte sera aligné avec le haut de l'image. Toutefois, vous aurez toujours un écart entre la première ligne de texte et les lignes suivantes.

C'est parce que le texte est rendu un ligne-boîte de à la prochaine, à la verticale. Peu importe si la ligne de la première ligne est plus grande que le reste, il faudra encore de flux d'une ligne-fort à la fois. Voici une visualisation de ce concept:

Un autre concept important à comprendre c'est que <img> est un remplacé inline élément, ce qui signifie que son apparence est construit par une ressource externe à l'extérieur du document. remplacé inline éléments peuvent prendre un height valeur, tandis que les soi-disant non remplacé inline (comme un ) les éléments ne peuvent pas. C'est pourquoi <img> foo peuvent se comporter différemment que foo bar (parce que l'image a une valeur intrinsèque de hauteur), même si ils sont tous des éléments inline. Imaginez le réglage de la hauteur de l'image à la hauteur du texte -- il serait effectivement rendre le même que celui de votre image, mais dans ce cas, il se comporte exactement comme vous le souhaitez:

CSS:
```
img {
 height: 10px;
 }

p { 
 display: inline;
 }
```
HTML:
```
<div>
 <img src="http://placehold.it/100x100/E8117F/000.png">
 hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
```
Ce peut-être là une partie de la confusion qui se passe. Si vous pouvez imaginer les lignes alors vous pouvez comprendre qu'il n'y a pas d'attente pour les éléments en ligne pour se comporter comme des flottait éléments.

Comparer cette information à ce que la spec dit à propos de flotteurs:

Un float est une boîte qui est décalée vers la gauche ou la droite sur la ligne actuelle. Le plus caractéristique intéressante d'un flotteur (ou "flotté" ou "flottant" de la boîte), c'est que le contenu peut couler le long de son côté (ou l'interdiction de le faire par la "en clair" de la propriété). Contenu coule sur le côté droit de la gauche flottait boîte et sur le côté gauche de droite flottait boîte.

Une flottait boîte est décalée vers la gauche ou la droite jusqu'à ce que son bord externe touche le bloc contenant l'arête ou le bord extérieur de l'autre flotteur. Si il y a une zone de ligne, le haut extérieur de la flottait boîte est aligné avec le haut de la boîte de ligne.

Alors que je ne peux pas vous décrire ce qui se passe en bas de l'électron, j'espère que c'est un bon point de départ pour comprendre pourquoi ces différents scénarios rendu de la façon dont ils le font.
- N'hésitez pas à suggérer une modification ou signaler une information erronée.
- Le titre demandé, "faire du paragraphe habillage de texte autour de l'image SANS flotteur". Flexbox pourrait fonctionner ici, même si je suis encore de la difficulté de l'habillage du texte en changeant la taille du navigateur sans un grand espace blanc apparaissant.
InformationsquelleAutor zep_fan
4

Essayez de faire de l'image absolue, alors l'utilisation de la côté sélecteur de frères pour ajouter un rembourrage à la prochaine balise de paragraphe pour compenser l'image. Violon ici: http://jsfiddle.net/r2MFz/3/

Voici le CSS.
```
img:first-of-type + p {
  padding-left: 110px;
  display: inline-block;
}

p {
  padding-bottom: 20px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}
```
Cela devient assez créatifs, d'autres que cela, je ne vois pas d'autre option que de flotteur.

InformationsquelleAutor jabs83
2

Comme vous le dites, vous pouvez facilement surmonter ce problème en utilisant le flotteur. Cet article parle de formes et de flotter, c'est donc une bonne référence:
Comment habillage de texte autour d'une image à l'aide de HTML/CSS

Par conséquent, si vous êtes en train de demander quelles sont les causes de l'espace, vous êtes vraiment poser est de savoir comment le navigateur d'analyse et de rendu des processus liés à la flotte. En bref, alors que la segmentation et l'analyse est plus compliqué que cela, le concept de base reste que le navigateur est le rendu de la sortie sur l'écran de gauche à droite, de haut en bas. Donc, si vous mettez votre balise d'image d'abord, comme un inheritably élément inline, il va prétendre que beaucoup de l'état de l'écran (l'affichage sur l'écran), car il a besoin de manière à afficher. Nous avons rendu de gauche à droite, de haut en bas, de sorte que le dernier spot le rendu pointeur clos était bas à droite de l'image. Si vous modifiez la balise suivante, sur le même niveau d'arborescence, d'être également en ligne, il sait juste continuer où l'image du pointeur de la gauche. Le pointeur indique, c'est là que je dois commencer à dessiner les mots dans la balise de paragraphe. Parce que je sais que les valeurs par défaut de la balise de paragraphe, je vais sauter sur place et de rendre une lettre à la hauteur et la largeur.

Float résout ce parce qu'une flottait boîte est placée dans le flux normal, ensuite retirés de la circulation et décalé vers la gauche ou la droite aussi loin que possible. Ainsi, le pointeur de la souris pour le cas où le paragraphe devrait continuer à rendre les changements de position.

Ici sont de bonnes sources pour que:
http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_general
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
- le titre et la question est à propos de: l'habillage du texte autour d'une image SANS flotteur. Auriez-vous l'esprit la mise à jour de votre réponse?
InformationsquelleAutor phpmeh

Vous avez besoin pour faire de l'image en ligne et flottant, pas le texte, Cela a été le moyen de faire des images se comporter au moins depuis '98, peut-être plus tôt, mais j'ai seulement commencé à travailler avec un traitement de texte depuis '98. Pour une raison quelconque, les images décider de flux de texte 😉

CSS:

img {
    float:left;
    display:inline-block;
    margin:10px;
   
}

HTML:

<div class="hoge">
    <img src="http://dummyimage.com/100x100/000/fff">
        <p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
</div>

InformationsquelleAutor Tschallacka

1

La raison de l'espace est probablement causée par le manque de vertical-align de la propriété. Si vous incluez le vertical-align: top de la propriété, de la première ligne du paragraphe va être déplacée vers le haut. Le seul problème est-il encore est un espace.

C'est ce que je veux dire: http://jsfiddle.net/7t633/5/

CSS
```
p {
    display: inline;
    vertical-align: top;
}
```
Mais si vous modifiez le fichier CSS un peu pour le img et p vous pouvez obtenir un float effet, sans l'aide de la float de la propriété. La seule chose c'est que le texte ne fait pas l'enrouler autour de l'image. Vous aurez à utiliser la float bien pour y parvenir.

C'est ce que je veux dire: http://jsfiddle.net/7t633/6/

CSS
```
img {
    display: inline;
    position: absolute;
}
p {
    display: inline-block;
    margin-left: 105px;
    vertical-align: top;    
}
```
InformationsquelleAutor Hkidd
1

Je ne pense pas qu'il y a une autre CSS solution pour l'envelopper sans flottante. Vous pourriez absolue de la position des éléments, mais alors ils seraient côte à côte, pas d'emballage. Vous pouvez également essayer d'utiliser ce plugin jQuery pour placer du texte. Vous pouvez même enrouler autour de la courbe des images:

http://baconforme.com/

InformationsquelleAutor geochanto
-2

Ce n'est pas le CSS, mais à utiliser align="left" à la balise img est une alternative.
```
<img src="http://dummyimage.com/100x100/000/fff" align="left">
```
- L'attribut align est obsolète dans le HTML4.
- Je suis d'accord avec @jabs83. J'bas-voté ce parce que l'attribut align est obsolète.
InformationsquelleAutor saulotoledo

Vous devez vous connecter pour publier un commentaire.