Aligner le texte et les images

J'ai des difficultés avec une section particulière. L'objectif souhaité est de ressembler à this. J'obtiens this.Aligner le texte et les images

.timeline { 
    text-align: center; 
} 

#about-us { 
    ul { 
     &:before { 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: 50%; 
      width: 2px; 
      margin-left: -1.5px; 
      content: ''; 
      background-color: #f1f1f1; 
      z-index: -1; 
     } 
    } 
    img { 
     width: 150px; 
     height: 150px; 
     border-radius: 50%; 

    } 
} 

.timeline-img { 
    border: 7px solid #f1f1f1; 
    border-radius: 50%; 
    text-align: center; 
    display: inline-block; 
} 

.timeline-1, 
.timeline-3 { 
    .timeline-info { 
     float: left; 
     width: 45%; 
     text-align: right; 
    } 
} 

.timeline-2, 
.timeline-4 { 
    .timeline-info { 
     float: right; 
     width: 45%; 
     text-align: left; 
    } 
}

En outre, la ligne grise à la fin déborde un peu, et je ne peux pas le faire tant que la dernière image.

Source

2017-09-06 KestVir

Êtes-vous opposé à l'aide du système de grille de Bootstrap pour cela? Je travaille sur une solution utilisant le système de grille maintenant. –

Vous pouvez utiliser une partie de la classe de bootstrap reverse flow

Utilisation .flex-row pour définir une direction horizontale (par défaut du navigateur), ou .flex-row-reverse pour démarrer la direction horizontale à partir du côté opposé.

HTML de mise à jour possible

<ul class="timeline"> 
    <li class="timeline-1 d-flex flex-row-reverse"></li> 
    <li class="timeline-2 d-flex"></li> 
    <li class="timeline-3 d-flex flex-row-reverse"></li> 
    <li class="timeline-4 d-flex"></li> 
    <li class="timeline-5 "></li> 
</ul>

Ensuite, vous pouvez ajouter un pseudo pour remplir un espace vide de la même largeur de timeline-info:

CSS mise à jour possible

.timeline li:before { 
    content:''; 
    width: 45%; 
}

https://codepen.io/gc-nomade/pen/gxJvBj

Source

2017-09-06 22:06:53

Merci pour la solution, je viens de poser quelques questions: 1.Si le '.timeline li: before' a une largeur de 45% et le .timeline-info a la même largeur, ce qui signifie qu'il reste 10% , Alors, où faut-il aller? Est-ce l'image div? Parce que j'ai essayé de donner aux éléments mentionnés 50% de largeur et les imgs ne se sont pas cassés à la ligne suivante. 2. J'ai remarqué que les images ont perdu environ 8px de largeur. Quand j'ai diminué la largeur des éléments mentionnés dans la première question de 45% à 40%, les imgs ont retrouvé toute leur largeur, mais étaient légèrement décentrés. Les 45% étaient-ils des sweetspot ou était-ce quelque chose d'autre? – KestVir

@KestVir mieux serait de définir flex: 1 à la fois timeline-info et: avant (https://codepen.io/gc-nomade/pen/gxJvBj mis à jour) et oublier la largeur, le navigateur traitera au mieux et ils partagera uniformément l'espace que l'image centrale n'utilisera pas. c'est le flex typique, c'est flexible :) quand vous définissez des valeurs statiques, le navigateur va essayer de s'adapter et les éléments peuvent se dilater, rétrécir ou déborder –

Aligner le texte et les images

Répondre

Questions connexes