插入附加内容时，请保持一个不断填充的浮动DIV行

Question

我有一些浮动的预览版divs。在单独的div中有一些额外的内容，这些内容首先被隐藏，然后点击打开。这些附加内容占用了整个宽度，并自然地将浮动div分开 - 我不想覆盖预览div。

它看起来像这样现在：

有什么办法不打破浮筒或使得实际的行内总是充满插入一些下面的预览的div？

我想看看它是这样的：

Here is a FIDDLE

的HTML：

<div class="preview">1</div> 
<div class="content"><h2>Additional Information</h2><p>Some content.</p> 
</div> 
<div class="preview">2</div> 
<div class="content"><h2>Additional Information</h2><p>Some content.</p> 
</div> 
<div class="preview">3</div> 
<div class="content"><h2>Additional Information</h2><p>Some content.</p> 
</div> 
<div class="preview">4</div> 
<div class="content"><h2>Additional Information</h2><p>Some content.</p> 
</div> 
<div class="preview">5</div> 
<div class="content"><h2>Additional Information</h2><p>Some content.</p> 
</div> 
<!-- ... and more like so //--> 

的CSS：

.preview { 
width: 150px; 
height: 150px; 
border: solid 10px #fff; 
float: left; 
background-color:#999; 
text-align: center; 
cursor: pointer; 
} 
.preview.active { 
background-color:#CCC; 
border-bottom-color: #CCC; 
} 
.content { 
clear: left; 
width: 80%; 
margin: 20px 0; 
padding: 5% 10%; 
background-color:#CCC; 
display: none; 
} 

jQuery-Script：

jQuery('.preview').click(function(){ 
if ($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
    $('.content.show').slideToggle(500, function(){ 
     $('.content.show').removeClass('show'); 
    }); 
} 
else if ($('.preview').hasClass('active')) { 
    $('.preview').removeClass('active'); 
    $('.content.show').slideToggle(500, function(){ 
     $('.content.show').removeClass('show'); 
    }); 
    $(this).addClass('active'); 
$('.active + .content').slideToggle(500, function(){ 
     $('.active + .content').addClass('show'); 
    }); 
} 
else { 
$(this).addClass('active'); 
$('.active + .content').slideToggle(500, function(){ 
     $('.active + .content').addClass('show'); 
    }); 
} 
}); 

Answer 1

以下是使用绝对定位开始的快速方法。它有小故障，并没有完成，但正如我所说，只是一开始。我重构了jQuery代码，将.content div放入.preview div中，并添加了一些CSS。

http://jsfiddle.net/awv6gx4m/2/

HTML：

<div class="preview"> 
    2 
    <div class="content"><h2>Additional Information</h2> 
     <p>Some content.</p> 
    </div> 
</div> 

CSS：

.content { 
    clear: left; 
    margin: 20px 0; 
    padding: 5% 10%; 
    background-color:#CCC; 
    display: none; 
    position: absolute; 
    top: 150px; 
    left: 15px; 
    width: 500px; 
} 

的jQuery：

jQuery('.preview').click(function() { 
    $('.content').not($(this).find('.content')).slideUp(500); 
    $(this).find('.content').slideToggle(500, function(){ 
     $('.content.show').removeClass('show'); 
    }); 
});