Je lisais beaucoup d'articles et de messages et j'ai été largement dit d'utiliser l'affichage comme inline-bloc au lieu de flotter
donc j'ai pensé que je pensais essayer. Mais je suis incapable de reproduire la sortie exacte du flotteur tout en utilisant le bloc-en ligne
J'espère que quelqu'un peut m'aider à ce sujet
3 Réponses :
première chose d'abord, votre HTML n'est pas correctement formé. Pour une meilleure sémantique, n'insérez pas une image Si vous voulez et une légende et une légende Utilisez IMG et FIGCAPTION.
De plus, si vous voulez que le texte soit côte à côté de l'image, vous devez utiliser flex fort>, qui mettra facilement les deux éléments côte à côte. P> Voici une démonstration rapide : p> p>
<figure>
<img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</figcaption>
</figure>
Cela fonctionne bien merci. Pouvez-vous dire pourquoi cela ne fonctionne pas avec le bloc en ligne? Lorsque j'utilise Inline-Block, le texte au lieu de résider aux côtés de l'image se présente à la place. Si vous pouvez inclure le bloc inline dans votre solution, veuillez le faire comme commenté et garder Flex aussi
Je sais que Flexbox est encore mieux que le bloc inline (flotteur étant le pire) mais je suis actuellement sur les phases initiales de CSS et en ligne-block est quelque chose que je connais beaucoup plus ... Donc, serait donc bon de savoir que
Puisque je sais qu'il n'y a pas de remplaçant pour ce que vous vouliez avec Comme vous savez qu'il y a des avantages d'utiliser mais à la mise en œuvre de l'image et du texte côte à côte, vous pouvez utiliser Flexbox aussi bien et vous pouvez vérifier Cette réponse ou réponse que @Pedrofigueiredo a fourni plus d'informations. inline-block Propriété d'affichage. Ce n'est pas la chose exacte que vous attendez avec impatience, mais vous pouvez obtenir une telle chose avec cette approche fournie dans ici .
inline-block sur float et vous pouvez vérifier ces mêmes questions à plus d'informations à ce sujet:
Eh bien, il me semble que l'affichage: Inline-Block ne peut aligner que des divs en une seule rangée mais ne peut pas agir exactement comme la fabrication de texte flottante enveloppée autour d'une image. Tant d'innombrables comparaisons sur Internet fabriquées pour croire que nous pouvons répliquer exactement l'effet de flotteur en ligne-block
@Badalsingh aussi loin que je sache, vous pouvez utiliser inline-block pour span , div , em , < Code> fort et p .
Le sur float strong>: élément est p> float code> et inline-block code> fonctionne différent: supprimé code> de le flux normal dose non supprimé code> du flux normal fort> tellement théorique ne peut pas reproduire d'autres éléments autour comme flottant p>
the image will leave the paragraph flow to the container flow
Comment reproduire le flotteur avec l'affichage comme bloc inline correctement -> Vous ne pouvez pas, aussi simple que cela.
Inline-Block ne s'approche pas d'un remplacement du flotteur. Ou vice versa. Croyez très peu de ce que vous avez lu sur Internet.