Menu
I have an HTML page which contains inline-block divs with variable heights (marked with .banner classes):
<html>
<head>
<body>
<div id="container">
<div id="header" style="margin: 0; width: 100%">
<div>
<div class='banner'> ... </div>
<div class='banner'> ... </div>
<div class='banner'> ... </div>
</div>
.banner {
display: inline-block;
}
They have different widths and are added at runtime. The site layout looks ugly and the banners are not vertically aligned.
For unknown reasons, the div does not start not from the top left corner, but there is some empty space at top. How do you align it and the next banner vertically (e.g. make their bottom lines aligned)?
I'm using jQuery, jQueryUI, and ASP.NET MVC2.
735
The most common and traditional way (inline-block) The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
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.
The vertical-align property defines the vertical alignment of an inline element. The "top" value aligns the top of the aligned subtree with the top of the line box. We must apply the vertical-align property to the "small-box" only to make it start at the top of the container.
.banner {
display: inline-block;
vertical-align:middle;
}
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
