Changing media screen makes div overlay

问题

I am using Bootstrap and the divs are 4-columns each (col-md-4). Based on Bootstrap with 12-columns it means that in the PC media screen it would be three divs at each row. Below 991px it's standard that each 4-columns covers the whole screen. Please see screenshot:

However, I want the 4-columns to only cover 50% of the screen when screen size is between 600px and 990px. Meaning there are two divs at each row. This is something I have succeeded in, but there are some issues.

When loading the page at mobile portrait (approx < 530px) everything loads correctly. The div does not overlay each other.

When loading the page at mobile landscape, or ipad portrait (approx > 740px) everything loads correctly. The div does not overlay each other.

When flipping the screen from either mobile portrait to mobile landscape or opposite it's starting to act strange. The divs are clearly overlaying each other.

The effect I want has been adding by using the following CSS:

@media screen and (min-width: 991px) and (max-width: 1200px) { #isotope-list img { height: 100%; } }

@media screen and (min-width: 600px) and (max-width: 990px) { #isotope-list .col-md-4 { width: 50%; } #isotope-list img { height: 100%; } }

@media screen and (max-width: 599px) { #isotope-list img {  height: auto; }}

When removing this CSS it goes back to standard Bootstrap and there are no divs overlaying each other. This means there must be something wrong with the connection between my CSS and Bootstrap. Meaning there should be something I could add to prevent this from happening.

The site can be found here: http://goo.gl/9IsTIl

Here is the HTML/PHP if needed:

<div class="col-md-12">
    <div id="isotope-list">    
            <div class="item col-md-4"> 
                <div class="content grid lefttext">
                    <figure class="effect-lily">
                        <!-- image -->
                        <figcaption>
                        <!-- caption -->
                        </figcaption>           
                    </figure>     
                </div> 
            </div>
        </div>
</div>

Edit: The script that may interfare with the CSS: http://goo.gl/NnLwgo

Edit 2: This is the following I get when going from portrait to landscape in android browser on mobile:

回答1:

Reason is that you have set height: auto on the img when the screen goes lower 600px.

Your code:

@media screen and (max-width: 599px) {
  #isotope-list img {
    height: auto;
  }
}

So when isotope rearrange your elements, it won't know your image sizes which will cause miscalculation of the positions.

To fix that is to remove that height: auto then remove the max-width being set on .grid figure img which will remove the ugliness during the transition.

@media screen and (max-width: 599px) {
  .grid figure img {
    max-width: none;
  }
}

The problem left is that the image will exceed the width of it's container, as you can see in the image below.

What I can think to fix this is to have a good use of the isotope events so when it finishes arranging the elements, you add class to the images and set it with max-width: 100%.

e.g.

var $grid = $('#isotope-list').isotope({...});

$grid.on( 'arrangeComplete', function( event, filteredItems ) {
   $(".grid figure img").addClass("imgArranged");
});

Then on your final media query will have to look like this:

@media screen and (max-width: 599px) {
  .grid figure img {
    max-width: none;
  }

  .grid figure img.imgArranged {
    max-width: 100%;
  }
} 

Update - Adding the JS stuff

The settings for your isotope can be found here, so when using the isotope events, it would be appropriate to write it there.

In your case add this:

  // Add class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

That file should look like this now:

jQuery(function($) {

  var $container = $('#isotope-list'); //The ID for the list with all the blog posts
  $container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector: '.item',
    layoutMode: 'masonry'
  });

  // Add class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters,#filters-undercat'),
    $optionLinks = $optionSets.find('a');

  $optionLinks.click(function() {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
    var selector = $(this).attr('data-filter');
    $container.isotope({
      filter: selector
    });

    return false;
  });

});

来源：https://stackoverflow.com/questions/31570342/changing-media-screen-makes-div-overlay