具有不同缩略图高度的自举网格

<div class="col-md-6"> 
    <div class="thumbnail"> 
      <img src="800x500.jpg" alt=""> 
      <div class="caption"> 
        <h3>Image 800x500</h3> 
       </div> 
      </div> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="thumbnail"> 
      <img src="400x500.jpg" alt=""> 
      <div class="caption"> 
        <h3>Image 400x500</h3> 
      </div> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="thumbnail"> 
      <img src="400x500.jpg" alt=""> 
      <div class="caption"> 
        <h3>Image 400x500</h3> 
      </div> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="thumbnail"> 
      <img src="800x500.jpg" alt=""> 
      <div class="caption"> 
        <h3>Image 800x500</h3> 
      </div> 
    </div> 
</div>

我正在使用引导程序，并在每行中包含2个图像的上述网格。所有图像具有500px的相同宽度。第一张图片的高度为800px，而第二张图片的高度为400px。第三张图片的高度为400px，应直接显示在第一张图片的下方。我的问题是，第一张图片没有直接显示第三张图片。第一个缩略图和第三个缩略图之间有一个很大的空间。当每幅图像具有相同的高度时，它就可以工作任何想法为什么？谢谢具有不同缩略图高度的自举网格

期望的结果是：在高度 http://wlog.cn/demo/waterfall/infinitescroll.html

每个图像不同，但是在宽度是相同的。

来源

2016-03-03 Steve

问题是，你的第4个img是800像素高，因此使你的行800像素高。由于大多数imgs在元素的底部垂直对齐，所以在img 1和3之间会留下很大的空白区域。我会减小第4个图像的高度。 – andnowchris

http://wlog.cn/demo/waterfall/infinitescroll.html这是所需的结果，其中每个图像的高度可能不同。 – Steve

根据我的理解，自举网格就是这样，有行。看看http://masonry.desandro.com/ – ashin999

你需要附上每行中的一类=“行”

http://getbootstrap.com/css/#grid

<div class="row"> 
    <div class="col-md-6"> 
    <div class="thumbnail"> 
     <img src="800x500.jpg" alt=""> 
     <div class="caption"> 
       <h3>Image 800x500</h3> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-6"> 
    <div class="thumbnail"> 
     <img src="400x500.jpg" alt=""> 
     <div class="caption"> 
       <h3>Image 400x500</h3> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
    <div class="thumbnail"> 
     <img src="400x500.jpg" alt=""> 
     <div class="caption"> 
       <h3>Image 400x500</h3> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-6"> 
    <div class="thumbnail"> 
     <img src="800x500.jpg" alt=""> 
     <div class="caption"> 
       <h3>Image 800x500</h3> 
     </div> 
    </div> 
    </div> 
</div>

要获得精确的那种你链接到布局，你需要使用比其他的东西Bootstrap网格系统。它不这样工作。

来源

2016-03-03 21:04:17

具有不同缩略图高度的自举网格

回答

相关问题