J'ai deux divs affichés en ligne-block à côté de l'autre, chacun avec une largeur de 45%. À un certain point de rupture, leurs largeurs sont toutes deux modifiées à 100%, ce qui leur fait pile. Ceci est évidemment super simple. Ma question est la suivante: comment puis-je modifier le balisage audit point de rupture pour faire en sorte que le fond diviserait-il sur le dessus?
Mon balisage existant repose fortement sur considère cet exemple simple: p> p> Inline-Block code> Affichage de niveau , et je préférerais ne pas changer de choses sur flexbox code> à l'échelle du site pour le moment. Ainsi, je suis après une solution qui utilise inline-block code>. P>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
4 Réponses :
Utilisez du flotteur pour spécifier l'emplacement de la DIV, puis commuter les divs de votre code HTML afin que le droit soit au-dessus de la gauche
p>
<div class="right"> <p>RIGHT</p> </div> <div class="left"> <p>LEFT</p> </div>
Plus 1 parce que cela fonctionne, mais j'aurais dû mentionner que je ne veux pas utiliser float ou tableau . Je préférerais faire cela en utilisant l'affichage inline-block à moins que leur soit une voie plus moderne. float est trop vieux ..
Vous pouvez utiliser Affichage: Flex; Code> Propriété CSS. L'approche de base consisterait à définir l'élément parent (par exemple, conteneur) sur Affichage: flex; code> Ceci génère la flexbox et vous permet de définir différents paramètres pour les enfants comme <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>
Encore une fois, plus 1 parce que cela fonctionne, mais si possible, je voudrais une solution qui reste avec inline-block .
@Claire J'ai mis à jour la réponse avec vos exigences. Regarde
C'est assez hacky. Je ne vais probablement pas utiliser cela, mais les accessoires sur la pensée en dehors de la boîte comme ça. Assez bonne idée.
En dehors de la solution flexbox (que j'ai fournie), repose tout sera hacky d'une manière ou d'une autre. inline-block ne peut pas changer la commande par elle-même
J'apprends cela plus que je mène des recherches ici. J'espérais qu'une solution javascript apparaîtrait qui me permettrait de me préparer mon div au point d'arrêt ou de quelque chose. Cela pourrait finir par être flexbox ..
Avec JS vient une grande prudence, vous risquez de finir par écrire plus de lignes de codes que ce qui peut être juste atteint par Flexbox. Mais je suis d'accord, tout dépend de la façon dont vous voulez coder. Acclamations!
Je suis d'accord, mais dans ce cas, il y a des centaines de divs qui s'appuient sur le style en ligne et la commutation tout simplement pour soutenir une petite fonctionnalité prendront plusieurs heures, tandis qu'une solution JS pourrait prendre 10-15 minutes. Merci quand même!
@Claire j'ai mis à jour avec JQuery. Mais utilisez-le judicieusement si vous avez vraiment 100 divs :)
C'est celui-là. J'aimerais pouvoir vous donner plus 3 pour cela. Vous avez fourni 3 solutions de travail. Merci beaucoup. Oui, beaucoup plus facile pour moi de laisser tomber cela dans mon JS, puis d'ajouter des cours aux divs que je veux réorganiser aux points d'arrêt. Merci.
Je suggérerais que vous puissiez utiliser l'affichage J'ai créé une solution à votre problème, en emballant le J'ai créé un violon de travail pour une meilleure compréhension: https://jsfiddle.net/baliga/pqo69S3T/2/ flex car ils fournissent beaucoup d'avantages dans l'alignement, le positionnement, etc. .Left et .right à l'intérieur d'un conteneur Flex et changeant la direction flexible en conséquence.
Oui, je comprends les avantages de flexbox . Comme indiqué dans la question, j'ai un balisage existant qui repose fortement sur inline-block et j'ai besoin d'une solution qui ne nécessite pas de modification de la propriété d'affichage.
Si vous voulez une solution sans utiliser sinon, utiliser JavaScript est le seul moyen de le faire. Exemple: Vous pouvez le déclencher à une largeur de fenêtre particulière et obtenir le commutateur de commande de votre div. flex , ils sont la seule façon de gagner à l'aide de CSS consiste à effectuer le positionnement Ab absolu , mais la hauteur et haut | la valeur inférieure doit être défini en conséquence.