J'ai trois éléments de texte dans un conteneur. Le texte du milieu a la police la plus grande. Je voudrais aligner le haut du premier élément sur le haut du deuxième élément.

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
}

.large {
  font-size: 50px;
}
<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>

https://jsfiddle.net/7ofrravh/2/

La seule façon dont je peux penser pour faire cela est d'utiliser la position absolue, mais cela sort de la ligne lorsque je change la taille de l'écran. Je veux pouvoir changer la taille de l'écran et que tout reste en place. Est-ce que quelqu'un sait comment faire ceci?

1
orangepeel 15 nov. 2017 à 08:03

4 réponses

Meilleure réponse

Changer le CSS:

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  vertical-align:top;
  margin:0;
}

.large {
  font-size: 50px;
  line-height:1;
}
.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  vertical-align:top;
  margin:0;
}

.large {
  font-size: 50px;
  line-height:1;
}
<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>
0
ankita patel 15 nov. 2017 à 05:42

Vous devrez changer le code pour qu'il ressemble plus à ceci:

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  margin:0;
}

.large {
  font-size: 50px;
  line-height:1;
}
  
.first {
  vertical-align:top;
}
<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>
0
ankita patel 15 nov. 2017 à 05:39

Voilà comment je le ferais: https://jsfiddle.net/7ofrravh/5/. En rendant le conteneur flexible avec l'alignement du contenu et le début en utilisant align-items: flex-start. Ensuite, fixez simplement la position du premier paragraphe avec un margin: 10px 0 0 0.

0
Eugeniu Racila 15 nov. 2017 à 05:16

Voici la version modifiée de votre code

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  margin:0;
}
.container p.first {
  vertical-align:top;
  line-height:40px;
}

.large {
  font-size: 50px;
}
<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>
1
ankita patel 15 nov. 2017 à 05:37
47299691