html - Text align always right side of image and with same margin-left -
i have image , text right next it. when text long, text moves under image. how text align right next right of image regardless how long text is. , text neatly margined line after line (= not last lines moves under image. possible achieve?
attached fiddle...fiddle
here code:
<div class="car"> <div class="image"> <img alt="" src="http://placehold.it/50x50&text=car" /> </div> <div class="makeandmodel"> <div class="brand"> mercedes </div> <div class="model"> w126000000000000000000000000000000000000000000000000000000000000000000000000 </div> </div> </div>
css:
.car { display:block; } .car .image { margin:0; display:inline-block; vertical-align:middle; } .car .image img { max-width:100%; max-height:100%; } .car .makeandmodel { margin:0 0 0 5px; font-family:'droid serif'; display:inline-block; vertical-align:middle; } .brand { font-size:16px; color:#333333; font-weight:bold; display:block; } .model { font-size:12px; color:#5a5a5a; font-style:normal; display:block; }
add white-space:no-wrap;
in class .car
.car { display:block; white-space: nowrap; }
demo: fiddle
update
according image, set width of div covered both image , text.
update - 1
i think got solution you,
here jsfiddle-update
you have use word-wrap: break-word;
Comments
Post a Comment