Empêche la div flottante de passer à la ligne suivante en fonction de la longueur du contenu du texte

Question

J'ai rencontré des problèmes de positionnement CSS. Après avoir lu d'autres questions, je n'ai pas réussi à trouver mon problème exact ou quoi que ce soit que je puisse identifier qui m'indiquerait comment résoudre mon problème.

J'ai un nombre indéfini de lignes de données qui doivent suivre la même structure. La structure est la suivante :

• Une icône colorée à gauche
• Longueur indéfinie du texte à droite

Jusqu'à présent, j'ai obtenu le résultat suivant, qui me satisfait en ce qui concerne le texte d'une seule ligne :

Cependant, lorsque le texte dépasse une seule ligne, j'obtiens le résultat suivant :

Je dois faire en sorte que mon texte soit toujours aligné verticalement avec mon icône, de sorte que le milieu du texte soit aligné avec le milieu de l'icône. Les seules valeurs fixes dont je dispose sont les largeurs de mes icônes. Je ne peux malheureusement pas fixer la largeur de la div texte car elle doit s'étendre au fur et à mesure que la fenêtre s'agrandit.

J'ai obtenu la structure suivante pour créer les images présentées :

<div class="row">
    <div class="iconDiv">
        <div class="circle"></div>
    </div>
    <div class="informationDiv">
        <span class="information"></span>
    </div>
</div>

.row {
    clear: left;
}

.iconDiv {
    float: left;
    margin-left: 10px;
}

.informationDiv {
    display: inline-block;
    float: left;
    padding-top: 3px; /*How I am currently aligning my text vertically to center of icon*/
}

J'ai essayé d'utiliser le box-sizing au cas où cela pousserait la div à la ligne suivante, mais cela n'a pas semblé aider. J'ai également essayé de régler la hauteur de la div, mais là encore, rien n'y fait. La vérité est que le CSS n'est pas mon point fort et que je peux passer à côté de la vraie raison d'un problème. Si quelqu'un peut me recommander des ressources en particulier pour m'aider avec cet aspect du positionnement, ce serait fantastique. De plus, si la façon dont je conteneurise (c'est bien un mot) les choses n'est pas recommandée, je suis tout à fait disposé à changer cela.

Si c'est trop difficile sans utiliser des valeurs fixes, je pourrais alors faire en sorte que l'icône reste en haut de la ligne et que le texte continue à descendre au fur et à mesure qu'il grandit, le haut du texte étant aligné près du haut de l'icône. Ce n'est toutefois pas ce que je préfère.

Merci d'avance à tous !

Answer 1

Vous pouvez simplifier cela en un seul point flex parent et deux enfants. Alignement vertical avec flexbox est sans problème.

Démonstration

.row {
  display: flex;
  align-items: center;
}

.row {
  margin-bottom: 1.2em;
}

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;  
  margin-right: 15px;
  flex-shrink: 0;
}

.circle.high-pri {
  background-color: #ea9999;
}

.circle.medium-pri {
  background-color: #f9cb9c;
}

.circle.low-pri {
  background-color: #b6dca8;
}

<div class="row">
  <div class="circle high-pri"></div>
  <span class="information">High priority - No issues   here</span>
</div>

<div class="row">
  <div class="circle medium-pri"></div>
  <span class="information">High priority - No issues here but slightly longer text</span>
</div>

<div class="row">
  <div class="circle low-pri"></div>
  <span class="information">High priority - No issues but much longer text than first expected, which is definitely okay, see?</span>
</div>

Answer 2

Je ne sais pas exactement comment vous générez le cercle. S'agit-il d'une icône ou d'une image ? Lorsque vous utilisez une icône. Vous pouvez créer quelque chose comme ceci :

<p><img class="circle">Undefined text</p>

Je pense qu'il n'y aura pas de rupture de ligne. Et gardez-le toujours devant.

Aussi. Vous ne devriez probablement pas utiliser le padding-top sur le texte pour l'aligner au milieu du cercle. Utilisez la hauteur de ligne.

Par exemple :

Lorsque votre cercle a une hauteur de 30 px. Utiliser line-height: 30px; Il sera toujours centré à côté du cercle et fonctionnera mieux que le padding en ce qui concerne la réactivité.

Answer 3

Vous n'êtes pas loin.

Compte tenu de votre CSS actuel, la meilleure façon d'y parvenir est de ne pas faire flotter .informationDiv . Réglez-le sur display: block et lui donner un margin-left . L'élément flottant sera alors placé à l'intérieur de la marge.

Comme ceci...

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}
.row {
    clear: left;
}

.iconDiv {
    float: left;
    margin-left: 10px;
}

.informationDiv {
    display: block;
  margin-left: 40px;
}

<div class="row">
    <div class="iconDiv">
        <div class="circle"></div>
    </div>
    <div class="informationDiv">
        <span class="information">A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. </span>
    </div>
</div>

Answer 4

J'ai trouvé une solution à votre problème en utilisant css flexbox .

Démonstration de travail : https://codepen.io/shubhamYerawar/pen/xBZWLX .

.container {
  display: flex;
  flex-direction: column;
}
.container__row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 10px;
}
.red {
  background: red
}
.green {
  background: green;
}

<div class="container">
  <div class="container__row">
    <div class="icon red">
      <!--   here your icon or image will go       -->
    </div>
    <div class="text">Text</div>
  </div>
  <div class="container__row">
    <div class="icon_container">
      <div class="icon green">
        <!--   here your icon or image will go       -->
      </div>
    </div>
    <div class="text">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
      remaining essentially unchanged.
    </div>
  </div>
  <div class="container__row">
    <div class="icon red">
      <!--   here your icon or image will go       -->
    </div>
    <div class="text">Text</div>
  </div>
</div>

J'espère que cela vous aidera.