- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
J'ai cherché parmi les questions disponibles mais je n'ai pas trouvé de solution.
J'essaie de définir la hauteur de tous les éléments d'un conteneur de débordement horizontal pour qu'elle soit égale à la hauteur de l'élément le plus long.
body {
}
section{
width: 300px;
background: lightblue;
overflow: auto;
white-space: nowrap;
}
div{
display: inline-block ;
max-width: 150px;
background: lightgreen;
margin: 5px;
white-space: normal;
/* not working */
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<section>
<div>
hi there how are you push just IV by Rd hi TX cu
</div>
<div>
hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
</div>
<div>
hi there how are you push just IV by Rd hi TX cu
</div>
</section>
</body>
</html>
Comme vous pouvez le constater, la deuxième division est la plus longue. L'autre div doit être égal au deuxième div. De plus, je n'ai pas besoin d'une hauteur fixe.
P粉7908197272024-03-23 09:37:00
Vous pouvez utiliser la mise en page Flex.
section{
width: 300px;
background: lightblue;
overflow: auto;
white-space: nowrap;
display: flex;
align-items: center;
}
div{
display: inline-block ;
max-width: 150px;
background: lightgreen;
margin: 5px;
white-space: normal;
height: 100%;
}
P粉4038217402024-03-23 00:24:25
ne peut pas être enveloppé dans divs 上设置 min-width 并使其父级 flex.
section {
display: flex; /* new */
flex-wrap: nowrap; /* new */
width: 300px;
background: lightblue;
overflow: auto;
}
div {
min-width: 150px; /* new */
background: lightgreen;
margin: 5px;
}