J'essaie de faire la mise en page comme l'image mais j'ai échoué à faire.
p>
My Code: P>
<div> <div style="float: left; width: 70%">I'm on the left</div> <div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> </div> <div> <div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> <div style="float: left; width: 70%">I'm on the second on the left</div> </div> <div> <div style="float: left; width: 70%">I'm on the left</div> <div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> </div>
4 Réponses :
De nombreuses façons d'atteindre ce
peut ajouter de la direction: RTL au deuxième parent div
Peut modifier l'ordre de deuxième div alors div avec l'image est après Div avec du texte.
peut flotter img à droite dans la deuxième div
Peut utiliser l'affichage: Flex et Flex-direction: Row-Reverse
Ajouter une largeur: 100%; flotteur: gauche; au parent divs comme ci-dessous
p>
<div style="width: 100%; float:left; margin-bottom: 30px;"> <div style="float: left; width: 70%; background: green">I'm on the left</div> <div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> </div> <div style="width: 100%; float:left; margin-bottom: 2px"> <div style="float: left; width: 30%; background: green"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> <div style="float: left; width: 70%; background: red">I'm on the second on the left</div> </div> <div style="width: 100%; float:left;"> <div style="float: left; width: 70%; background: green">I'm on the left</div> <div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> </div>
Merci pour le code, j'essaie de <être> entre les sections, mais cela ne fonctionne pas, de quelque manière que je pouvais réaliser?
Cela fonctionne, c'est juste un supplément, car je veux avoir plus d'espace entre chaque section, mais
n'est pas le meilleur moyen. Utilisez la marge pour l'élément parent afin que vous puissiez ajuster le pixel d'espacement par pixel. J'ai mis à jour le code avec la marge.
Lorsque vous flottez des objets, ils perdent leur taille. Lorsque vous ajoutez une hauteur minimale aux divs des parents, les problèmes seront corrigés.
p>
<div style="min-height: 150px;"> <div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div style="float: left; width: 30%"> <img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"> </div> </div> <div style="min-height: 150px;"> <div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> <div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div style="min-height: 150px;"> <div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div> </div>
Merci pour le code, j'essaie de <être> entre les sections, mais cela ne fonctionne pas, de quelque manière que je pouvais réaliser?
Pourquoi essayez-vous cela? Qu'essayez-vous d'atteindre? Peut-être qu'une solution CSS sera meilleure.
Vous pouvez utiliser Flexbox et utiliser Support de navigateur Flexbox: https://caniuse.com/#search=flexbox p> p> Flex-direction: Row-Reverse; Code>. La propriété flex code> sur les éléments de l'enfant (image et texte) définit le rapport, dans ce cas, le texte avec flex: 3 code> est trois fois plus grand que l'image.
<div class="section">
<div class="section__text">Here is some text</div>
<div class="section__image">here is an image</div>
</div>
<div class="section section--reversed">
<div class="section__text">Here is some text</div>
<div class="section__image">here is an image</div>
</div>
Dupliqué possible de Comment envelopper le texte autour d'une image à l'aide de HTML / CSS
C'est juste une question d'effacement du flotteur:
corps> div {hauteur: auto; débordement caché; }Vérifiez ceci: Stackoverflow .com / questions / 30908987 / ...
corps> div {clair: les deux; } fera le travail. Ça efface le flotteur