pendant des heures, j'ai essayé de faire une simple boîte d'atterrissage Bannière fonctionnement dans tous les navigateurs concernés à l'aide de Flexbox, mais sans chance. Dans ce qui suit, il y a un croquis de la mise en page que je veux réaliser. Fondamentalement, deux boîtes pour une image et un titre côte à côte. Atteindre une certaine largeur minimale de la zone de titre, la mise en page doit envelopper sur une mise en page empilée:
p>
Ceci est mon code HTML: p> et ceci est le code CSS: P> div.wp-block-columns.landing_page_box {
display: flex;
flex-direction: row;
flex-wrap:wrap-reverse;
}
div.landing_page_box_left {
flex: 1 0 33.33%;
min-width: 300px;
padding: 30px;
background: #cccccc;
display: flex;
flex-direction: column;
justify-content: center;
}
div.landing_page_box_right {
flex: 2 0 66.66%;
}
3 Réponses :
Ici, la gauche est définie sur la taille 1 et la droite à la taille 2 de sorte que la gauche sera de 33% de taille
si la fenêtre est de 900px ou moins (la gauche serait donc de 300PX) puis de passer à une colonne-inverse Donc, il sera affiché sous forme de colonne et le titre viendra DERNIER P>
P>
<div class="landing_page_box">
<div class="landing_page_box_left">
<h2>Title</h2>
</div>
<div class="landing_page_box_right">
<figure>...</figure>
</div>
</div>Merci beaucoup pour vos suggestions! En effet, dans cet exemple simplifié, votre approche fonctionne assez bien. Toutefois, si une image est ajoutée à la colonne de droite, vous obtenez des erreurs:
display: flex; flex-direction: column; justify-content: center;
Outre les erreurs, je souhaite que le titre dans la colonne de gauche soit centrée verticalement. Dans mon code, j'ai déjà posté que j'ai réalisé cela en ajoutant les lignes suivantes à la classe CSS respective: p> Bien que cela fonctionne dans les 3 navigateurs (même dans IE11, YAY !) Je pense que c'est plus une solution de contournement qu'une solution robuste. Y a-t-il une meilleure manière de faire cela? Merci d'avance pour vos réponses! P> p>
Si vous souhaitez redimensionnez automatiquement une image pour adapter un code>, vous ne pouvez pas appliquer de largeur code> explicite code> ou hauteur à la balise d'image. Vous pouvez appliquer: p>
<div class="landing_page_box">
<div class="landing_page_box_left">
<h2>Title</h2>
</div>
<div class="landing_page_box_right">
<figure><img src="https://i.stack.imgur.com/SF9SU.jpg"></figure>
</div>
</div>
Une fois encore merci beaucoup pour votre réponse utile! J'ai suscité vos réponses, mais mes votes ne sont pas montrés depuis que je n'ai pas assez de messages encore ...
@Stoky, vous êtes les bienvenus. Vous pouvez marquer la suggestion la plus utile comme une réponse si vous avez résolu la question. Cela peut aider les autres membres de la communauté à l'avenir dans des problèmes similaires. Merci pour votre compréhension.
Je discuterais IE11 n'est pas pertinent et je pense que c'est soutenu par Edge Obtenir du chrome et c'est-à-dire pas
Je suis d'accord, IE11 a très buggy Flexbox Support: Caniuse.com/#search=flexbox
Utilisez des requêtes de média CSS?
J'ai testé la solution de Gman et ça fonctionne bien. Vous devez utiliser Query Media dans IE 11 et Ensemble
flex-direction valeur àcolonne-inverse pour créer la colonne de titre en bas lorsque vous enveloppez une disposition empilée.