- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Ich habe die verfügbaren Fragen durchsucht, aber keine Lösung gefunden.
Ich versuche, die Höhe aller Elemente eines horizontalen Überlaufbehälters so einzustellen, dass sie der Höhe des längsten Elements entspricht.
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>
Wie Sie sehen können, ist der zweite Abschnitt der längste. Das andere Div sollte dem zweiten Div entsprechen. Außerdem brauche ich keine feste Höhe.
P粉7908197272024-03-23 09:37:00
您可以使用 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
在 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;
}