How to make separate child divs' height equally?
Question
I have a problem with the alignment of my child divs. Is it possible to align them if the child elements were separated? I tried display: flex; and grids but nothing happened. What I want is to make the "title box" height equally. Sorry for my bad explanation, I am not a native English speaker.
body { display: flex; align-items: center; justify-content: center; height: 100vh; }.box-container { display: flex; gap: 10px; }.box { height: 100%; height: inherit; border: 2px solid green; width: 300px; padding: 5px; }.box-title { text-align: center; border: 1px solid red; }.text { color: blue; text-align: center; } button { width: 100%; margin: 0 auto; }
<body> <div class="box-container"> <div class="box"> <div class="box-title"> <h1>This is a loooooonnnnggggg title</h1> </div> <div> <p class="text">this should be aligned with the other div</p> <button>this should be aligned with the other div</button> </div> </div> <div class="box"> <div class="box-title"> <h1>Title</h1> </div> <div> <p class="text">this should be aligned with the other div</p> <button>this should be aligned with the other div</button> </div> </div> <div class="box"> <div class="box-title"> <h1>Title</h1> </div> <div> <p class="text">this should be aligned with the other div</p> <button>this should be aligned with the other div</button> </div> </div> </div> </body>
2 answers
solution1
3 2022-09-05 08:27:06
Go to your.box class and add these:
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Suggestion: you should learn more about flexbox
solution2
0 2022-09-05 08:35:38
Add this to the .box :
display: flex;
flex-direction: column;
Add this to the description:
margin-top: auto;
body { display: flex; align-items: center; justify-content: center; height: 100vh; }.box-container { display: flex; gap: 10px; }.box { height: 100%; height: inherit; border: 2px solid green; width: 300px; padding: 5px; display: flex; flex-direction: column; }.box-title { text-align: center; border: 1px solid red; }.box-description { margin-top: auto; }.text { color: blue; text-align: center; } button { width: 100%; margin: 0 auto; }
<body> <div class="box-container"> <div class="box"> <div class="box-title"> <h1>This is a loooooonnnnggggg title</h1> </div> <div class="box-description"> <p class="text">this should be aligned with the other div</p> <button>this should be aligned with the other div</button> </div> </div> <div class="box"> <div class="box-title"> <h1>Title</h1> </div> <div class="box-description"> <p class="text">this should be aligned with the other div</p> <button>this should be aligned with the other div</button> </div> </div> <div class="box"> <div class="box-title"> <h1>Title</h1> </div> <div class="box-description"> <p class="text">this should be aligned with the other div</p> <button>this should be aligned with the other div</button> </div> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Wrap child elements into 2 divs equally
How to make unknown number of divs fill all the remaining space equally?
how to append child divs to parent divs equally with using same class in jquery?
Separate button spacing equally and make responsive
Nestable list height of items make equally
How to make inner divs of two unrelated outer divs equal in height?
Equally distribute the height of an unknown number of children divs inside a parent div
Auto resize child divs so they equally share width of parent
How to expand height of the container div whenever child divs are expanded
Equally space 3 divs inside a div using jQuery to make 4 equal sections
Related Tags