When two inline-block
div
s have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container { _x000D_
border: 1px black solid;_x000D_
width: 320px;_x000D_
height: 120px; _x000D_
}_x000D_
_x000D_
.small {_x000D_
display: inline-block;_x000D_
width: 40%;_x000D_
height: 30%;_x000D_
border: 1px black solid;_x000D_
background: aliceblue; _x000D_
}_x000D_
_x000D_
.big {_x000D_
display: inline-block;_x000D_
border: 1px black solid;_x000D_
width: 40%;_x000D_
height: 50%;_x000D_
background: beige; _x000D_
}
_x000D_
<div class="container">_x000D_
<div class="small"></div>_x000D_
<div class="big"></div>_x000D_
</div>
_x000D_
How can I align the small div
at the top of its container?
This question is related to
css
Because the vertical-align
is set at baseline as default.
Use vertical-align:top
instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top;
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as @f00644 said you could apply float
to the child elements as well.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
You need to add a vertical-align
property to your two child div's.
If .small
is always shorter, you need only apply the property to .small
.
However, if either could be tallest then you should apply the property to both .small
and .big
.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Add overflow: auto to the container div. http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
Source: Stackoverflow.com