自适应-一排图片，有些带有边框

Question

I am trying to figure out how best to make the 2 rows of 4 images each on this page work responsively.

http://www.ashtonbrewingcompany.com/index-real.html

Right now I have set each DIV within the row to width: 24%. This would work fine if it weren't for the fact I need to have the borders appear on every other image.

Right now the image to the right of a bordered image ends up overlapping the border when the viewport gets smaller.

 <div class="instagram-container"> <div class="insta-content"> <div class="row01 inrow"> <div><span><img src="_img/insta-01.png" /></span></div> <div><span class="frame-01"><img src="_img/insta-02.png" /></span></div> <div><span><img src="_img/insta-03.png" /></span></div> <div><span class="frame-02"><img src="_img/insta-04.png" /></span></div> </div> <div style="clear:both;"></div> <div class="row02 inrow"> <div class="frame-03"><img src="_img/insta-05.png" /></div> <div><img src="_img/insta-06.png" /></div> <div class="frame-04"><img src="_img/insta-07.png" /></div> <div><img src="_img/insta-08.png" /></div> </div> <div style="clear:both;"></div> </div> </div> </div> 

 .instagram-container { padding: 120px 20px 60px 20px; width: 99%; margin: 0 auto; } .insta-content { text-align: center; } .row01 div { display: inline-block; width: 24%; } .row01 div span { display: inline-block; } 

Answer 1

They are overlapping because you are using display:inline-block . If you use display:block; and float: left then the overlap will go away (although you may have to adjust some of your other spacing). Typically then you would remove the float at a mobile breakpoint so each div is full width.