Menu
I'm trying to get the blocks pictured here to align with each other, but if they are different heights, for some reason the shorter div aligns to the bottom of the container div. Neither div has any sort of padding or margin that would cause this behavior. What do I need to do to get them to align to the top of the div?
951
To align things in the inline direction, use the properties which begin with justify- . Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.
Inline element properties: The height of an inline element is the height of the content. The width of an inline element is the width of the content. The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS.
Use display: flex property for the parent div So when you apply the display: flex property to the parent div , it sets its child elements with vertical-align: top . Browser Compatibility: Flexbox is very well supported across modern browsers.
vertical-align:top on the elements that you want to be vertically aligned (not on the parent), as they are display:inline-block.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
