J'ai cherché cette question et j'ai trouvé des réponses, mais mon scénario me manque.
La situation est que les éléments sont créés dynamiquement et placés dans des lignes. Dans chaque ligne, le nombre d'éléments est variable, donc je ne sais pas combien d'espace horizontal ils prennent à l'avance. L'un d'eux, je veux avoir le reste et le faire grandir verticalement au besoin, mais pour que sa position gauche reste inchangée, qui doit toujours être positionnée à droite des autres éléments de sa rangée. Voici une maquette de ce à quoi cela devrait ressembler pour trois lignes où la deuxième ligne doit croître:
Au lieu de cela, voici ce que je reçois:
Voici une version simplifiée de html qui illustre le problème:
.container {
display: block;
max-width: 600px;
border: 1px solid black;
}
.fixedPart1 {
display: inline-block;
width: 100px;
vertical-align: top;
background-color: red;
}
.fixedPart2 {
display: inline-block;
width: 200px;
vertical-align: top;
background-color: red;
}
.varPart {
display: inline-block;
max-width: 500px;
min-width: 50px;
background-color: yellow;
}<div class="container">
<span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
<span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
<span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>Parce que mon exemple ici est une simplification, j'espère que toute solution proposée sera aussi proche que possible de ce que j'ai posté ici. Tout conseil serait apprécié.
1 réponse
Utilisez simplement Flexbox comme ci-dessous:
.container {
display: flex;
align-items:flex-start;
max-width: 600px;
border: 1px solid black;
}
.fixedPart1 {
width: 100px;
background-color: red;
}
.fixedPart2 {
width: 200px;
background-color: red;
}
.varPart {
flex-grow:1;
min-width: 50px;
background-color: yellow;
}<div class="container">
<span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
<span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
<span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>