Unluckily I don't know what to开发者_开发问答 do :(
I want to align the text "bla bla...." at the bottom of the left div.
Setting it as position:absolute & bottom=0
doesnt work always because there are cases where image does not exist, and that would be a problem as if the text wont increase container div height...
I could change the layout if there is no img
with php but that doesnt guarantee that in case img
has less height than text, text overflow etc...
I know this is strange, the table is the only solution I have?
A table is rarely (if at all) a good solution for layout.
You could do a min-height
so if the img
does not exist, you will always have a height that will be adhered to.
You can use display:table-cell
.
http://jsfiddle.net/JeaffreyGilbert/32NWh/
<style type="text/css">
div#leftContent { float : left; position : relative;}
div#rightContent { float : right; position : relative;}
.bottom { position : absolute; bottom : 0; }
</style>
This is a rough Stylesheet emulating your skeleton; combined with something like...
<div id="leftContent">
<p class="bottom">Your text, as a 'p' element--but it could be any element.</p>
</div>
<div id="rightContent">
<img src="" />
</div>
Your <p>
element (or any element for that matter) would be positioned at the bottom of the left div, wherein you could change the padding/positioning to whatever you'd like; this still allows you to style the image in the adjacent div anyway you'd like.
精彩评论