css - Wrap text with margin around image -
is there way wrap text in div border , margin around image float: right?
far, best able text wrapping correctly around image border ended behind image.
edit
here screenshot of able like: http://www.tiikoni.com/tis/view/?id=6753a19
as can see, border ends behind image when i'm trying stop when reaches image border.
the code is:
<img src='images/mangos.jpeg' width='500px' style='float: right; border: 2px solid $theme; padding: 5px; margin: 0 5px 5px 5px;'> <div style='font-size: 19px; white-space: pre-wrap; border: 2px solid #f6b616; padding: 5px; margin: 5px;'> text here </div>
edit 2
sorry question wasn't clear. after small gap between text , image border. text , border needs wrap around image , border. there way of achieving this?
what seeing in fact normal. imagine text become higher image, true wrap make text proceed underneath image, , not in single column left of image. entire purpose of float after (though abused in kinds of ways). this:
+------+---+ +------+---+ |text |img| |text |img| this: |text +---+ not this: |text +---+ |text text | |text | +----------+ +------+
your use case can solved quite though, supposing background solid color. can mask text border see behind image. this:
<img src='path/to/image'> <p>lorem ipsum...</p> img { float: right; box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px #f6b616; margin: 7px 5px 5px 13px; width: 250px; } p { font-size: 19px; white-space: pre-wrap; border: 2px solid #f6b616; padding: 5px; margin: 5px; }
as you can see added double box shadow to image, mimics effect of border 5px margin. big difference white form shadow mask underlying border of text, produces effect after.
there other techniques, working pseudo elements (which useful in case have more complex background) find method easiest use case.
Comments
Post a Comment