html - How to add a border next to an image? -
i have 2 divs within larger div. first 1 has image, second has text.
in first div, there border below image currently.
#newsfeed_header { padding: 10px 0px; width: 98%; position: relative; } #nf_image:after { content: " "; border-bottom: solid 1px #000000; display: block; } #nf_text { text-transform: uppercase; font-size: 14px; font-weight: bold; font-family: oswald; } <div id="newsfeed_header"> <div id="nf_image"> <img src="//dummyimage.com/35x35" /> </div> <div id="nf_text">read latest</div> <br/> </div> however i'd border next image, how can that?
|<img>__________________| |text |
here how can it, works dynamic image size.
#nf_image { display: table; width: 100%; margin-bottom: 10px; } #nf_image img { display: table-cell; vertical-align: top; } #nf_image:after { display: table-cell; content: ""; width: 100%; border-bottom: solid 1px black; } #newsfeed_header { padding: 10px 0px; width: 98%; position: relative; } #nf_image { display: table; width: 100%; margin-bottom: 10px; } #nf_image img { display: table-cell; vertical-align: top; } #nf_image:after { display: table-cell; content: ""; width: 100%; border-bottom: solid 1px black; } #nf_text { text-transform: uppercase; font-size: 14px; font-weight: bold; font-family: oswald; } <div id="newsfeed_header"> <div id="nf_image"> <img src="//dummyimage.com/35x35" /> </div> <div id="nf_text">read latest</div> <br/> </div>
Comments
Post a Comment