Высота скрытого div не расширяется с содержанием масонства

У меня есть скрипт, который переключает видимость div, внутри div - содержимое, загруженное плагином кладки. Проблема, с которой я сталкиваюсь, заключается в том, что div (а в результате два div-оболочки) не увеличивается по высоте при загрузке содержимого кладки - он сжимает элементы кладки вместе.Высота скрытого div не расширяется с содержанием масонства

вот мой код:

<html> 
    <head> 
     <title>view?</title> 
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 
     <script type='text/javascript' src="http://masonry.desandro.com/jquery.masonry.min.js"></script> 

     <style type="text/css"> 
      #step_wrapper{ 
       width:960px; 
       margin:0px auto; 
       /*float:left;*/ 
      } 
      .step_num{ 
       float:left; 
       width:50px; 
       background-color:#0099ff; 
      } 
      .step{ 
       float:left; 
       width:910px; 
       background-color:#ff0000; 
       padding-bottom:20px; 
       margin-bottom:20px; 
      } 
      .step h2{ 
       padding:0px; 
       margin:0px; 
      } 
      .media{ 
       background-color:#59A20E; 
       width:100%; 
       text-align:center; 
       cursor:hand; 
       float:left; 
      } 
      #content-step-1{ 

      } 
      .content{ 
       float:left; 
       min-width:785px; 
       margin-left:40px; 
       background-color:#0066ff; 
       padding-left:15px; 
       display:none; 
      } 
      .item { 
       width: 165px; 
       float: left; 
       padding:5px; 
       background-color:#FF0; 
       margin-top:10px; 
      } 
     </style> 
     <script> 
     $(function(){ 
      <!-- masonry plugin --> 
      var $container = $('#content-step-1'); 
      $container.imagesLoaded(function(){ 
       $container.masonry({ 
       itemSelector : '.item', 
       columnWidth : 165 
       }); 
      }); 
      $($container).masonry({ 
       // options 
       itemSelector : '.item', 
       columnWidth : 165, 
       gutterWidth : 35 
      }); 
      <!-- masonry plugin --> 

      <!-- needs to be auto generated --> 
      $("#step-1").click(function() { 
       $("#content-step-1").toggle("fast"); 
      }); 
      <!-- needs to be auto generated --> 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="step_wrapper"> 
      <div class="step_num">1)</div> 
      <div class="step"> 
       <h2>STEP ONE SON</h2> 
       <p>Description here bro</p> 
       <div id="step-1" class="media">expand</div> 
       <div id="content-step-1" class="content"> 
        <div class="item">asjdlajskdla</div> 
        <div class="item"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" width='165' /></div> 
        <div class="item">baksdkjasdasdsdadasdasda</div> 
        <div class="item">asjdlajskdla</div> 
        <div class="item">baksdkjjsdksd</div> 
        <div class="item">baksdkjasdasdsdadasdasda</div> 
        <div class="item">asjdlajskdla</div> 
        <div class="item">baksdkjjsdksd</div> 
       </div> 
      </div> 

     </div> 
    </body> 
</html>

помощь будет высоко оценили, спасибо!

источник

2013-02-18 24x7

Несколько дней назад я столкнулся с проблемой курения. что вам нужно сделать здесь, когда вы нажимаете, чтобы открыть скрытый div, чем у вас есть reload вид каменной кладки. Используя ниже.

$("#step-1").click(function() { 
    $("#content-step-1").toggle("fast"); 
    $container.masonry('reload'); 
});

источник

2013-05-10 13:35:08 Roopendra

Высота скрытого div не расширяется с содержанием масонства

ответ

Смежные вопросы