Reputation: 1706
I have an a
tag with these content:
<a height="0">
<img style="width:100px; height:100px; display:inline;" src="..." >
<div style="width:100px; height:100px; display:inline;" src="..." >
Hello
</div>
</a>
I want: the div
contents shows from top of a
but it shows from middle
I set a
's height
to 0 because of my projects not for this issue;
I test css top
margin
padding
valign
... but no one make it true
Upvotes: 0
Views: 140
Reputation: 2063
there is a lot of ways of implementing it, here is my solution. It's just simply floating elements. Works fine.
img {
width:100px;
height:100px;
float:left;
}
div {
width:100px;
height:100px;
float: left;
}
<a height="0">
<img src="..." >
<div src="..." >
Hello
</div>
</a>
Upvotes: 1
Reputation: 13620
Give float:left
for your div
sample http://jsfiddle.net/uLqa2ky5/
Upvotes: 0
Reputation: 128856
Give your div
element a vertical-align
of top
:
div {
vertical-align: top;
}
<a height="0">
<img style="width:100px; height:100px; display:inline;" src="http://placehold.it/100x100" >
<div style="width:100px; height:100px; display:inline;" src="..." >
Hello
</div>
</a>
Upvotes: 1