Forcing Long Photo Captions To Wrap - CSS-Tricks

Trang chủ » Html Wrap Text Around Image With Caption » Forcing Long Photo Captions To Wrap - CSS-Tricks

Có thể bạn quan tâm

Home › Forums › CSS › Forcing long photo captions to wrap

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author Posts
  • August 26, 2015 at 1:14 pm #207218 websupportguyParticipant

    I’m using CSS to give the photos on my travel site a “polaroid” look but in doing this I’ve found that long captions overlap the left and right edges of the centred image boundary and when they go to two lines they also overlap the bottom border.

    What can I do to make them behave correctly? See http://www.asiantraveltips.com/thailand/khao-san-road-bangkok/ (second image on page) as a good example of the problem.

    This is the CSS I’m using:

    .wp-caption img, .post .featured-image img { border-radius: 2px; background: #eee; box-shadow: 0 0 3px #333; border: solid 1px #F4EFEF; padding: 5px 5px 40px; }

    .wp-caption .wp-caption-text { margin: .8075rem 0; }

    .wp-caption-text { position: relative; bottom: 50px; text-align: center; width: 100%; }

    August 26, 2015 at 1:25 pm #207221 Paulie_DMember

    I saw this solution on Stack Overflow the other day.

    http://stackoverflow.com/questions/32196141/css-width100-not-working-in-google-chrome

    http://codepen.io/Paulie-D/pen/GpKJWo

  • Author Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.

Từ khóa » Html Wrap Text Around Image With Caption