3
votes

Empêcher le div flottant d'aller à la ligne suivante en fonction de la longueur du contenu du texte

J'ai rencontré des problèmes de positionnement CSS. Après avoir lu d'autres questions, je n'ai pas pu trouver mon problème exact ou tout ce que je peux identifier qui indiquerait comment je pourrais 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 non définie du texte à droite

Jusqu'à présent, j'ai le résultat suivant dont je suis satisfait en ce qui concerne le texte sur une seule ligne:

Cependant, lorsque le texte dépasse une seule ligne, je me retrouve avec le résultat suivant:

J'ai besoin pour 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 que j'ai sont pour la largeur de mes icônes. Je ne peux malheureusement pas fixer la largeur du texte div car il doit s'agrandir à mesure que la fenêtre se développe.

J'ai 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*/
}

html css

3 commentaires

J'essaie toujours de ne pas utiliser float lors du positionnement des choses. display: flex; est une bien meilleure option (comme expliqué dans l'article d'Andy ci-dessous).

U a dit que la div de texte doit s'étendre à mesure que la largeur de l'écran augmente. C'est un cas d'utilisation parfait pour les valeurs vw . Pour en savoir plus, cliquez ici . Je suggère également de regarder dans la boîte flexible et la grille css, en particulier la grille css pour ce cas particulier

@ Amiratak88 Merci pour le tuyau, les trucs vw et vh semblent intéressants. Flex est certainement quelque chose que je vais devoir approfondir également.

4 Réponses :

1
votes

Je ne sais pas trop 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 que cela ne cassera pas la ligne. Et gardez-le toujours devant.

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

Par exemple:

Lorsque votre cercle mesure 30 px de haut. Utilisez line-height: 30px; Cela le maintiendra toujours centré à côté du cercle et fonctionne mieux que le remplissage en ce qui concerne la réactivité.

2 commentaires

Vive le conseil concernant la hauteur de la ligne. J'utilise un div pour le cercle auquel je donne une couleur d'arrière-plan et un rayon de bordure de 50%.

@Stevo Okay Great, Wel si vous l'utilisez comme couleur d'arrière-plan, je devrais simplement créer un div à l'intérieur d'un div. Au lieu d'une ligne avec 2 divs, et donnez au div à l'intérieur du div la couleur d'arrière-plan. Et placez le texte après (1 div vers le haut)

4
votes

Vous pouvez simplifier cela à un parent flex et à deux enfants. L'alignement vertical avec la flexbox est sans tracas.

Démo

<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>

.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;
}

4 commentaires

Cela ne fonctionnera pas tout à fait avec le cas de la ligne d'emballage de l'OP. Assurez-vous d'ajouter flex-shrink: 0; au .circle , sinon lorsque le contenu dépasse une ligne, il commencera à se réduire. +1 pour obtenir l'OP pour apprendre le flex :)

@martinedwards Excellent point! Mis à jour. Je suppose que min-width fonctionnerait aussi, mais flex-shrink: 0 est mieux.

Merci une tonne pour la réponse, je ferai les changements quand j'en aurai l'occasion. On dirait que d'autres ont eu la même idée, il est donc peut-être temps de lire sur certains CSS flex. Excellent format de réponse aussi!

Je viens de tester cela et cela fonctionne à merveille! Je suis vraiment surpris de voir à quel point le code pourrait être coupé pour atteindre ce que je recherchais, donc certainement quelque chose à dire pour ne pas trop compliquer les choses. Je vais vérifier flex plus loin, merci une tonne pour cela!

1
votes

Vous n'êtes pas loin.

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

Comme ceci ...

<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>

.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;
}

0 commentaires

1
votes

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

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

<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>

.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;
}

J'espère que cela vous aidera.

0 commentaires