html - 均匀出空间布局(表)

Question

对于我正在创建的 Web 应用程序(在 Umbraco 中，但在这种情况下我认为这并不重要)我需要一个页面来显示不同媒体类型的概览；音频、视频和图像。

没问题，对于图像和视频(托管在 YouTube 上)我将显示缩略图，对于音频我将显示静态图像。

一个元素的粗略布局是图像显示在顶部，下面是一些信息，如标题和简短描述。

现在由于图像尺寸的不同(缩略图可以有可变大小，音频静态图像可能总是比缩略图小，等等)一个元素(或列，如果你愿意)可以更少比另一个宽度。
我想做的是每行显示三个元素，当该行未完全填满时，我想用一个彩色框填充它。但是那个盒子不应该总是在最后，它也可以在两者之间，或者开始。它只是在需要空间填充时“随机”插入。

因为一张图片说的超过 1000 个字(我要描述的内容的线框)；

现在我的问题；这是可能吗？如果是，怎么办？
我无法全神贯注，我认为它不能用纯 HTML 和 CSS 来完成。因为您无法确定元素有多大以及是否需要“填充物”。

我现在的粗略 HTML 是这样的:

<table id="portfolio">
      <tr>
          <td>
            <div class="portfolioItem">
              <div class="portfolioItemImage">
                 <a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
              </div>

              <br clear="both" />

              <div class="portfolioItemDescription">
                <h3>Title</h3>
                <p>Description lorem ipsum etc.</p>
              </div>
            </div>
          </td>
       </tr>
    </table>

当然还有一些更动态的东西在那里确定它是视频、音频还是图像，确定何时开始新行等。但这与这里无关。

这是与之关联的 CSS:

  #portfolio {
    width:100%;
  }

  #portfolio td {
    width:33%;
  }

  #portfolio .portfolioItem {
    border: 1px solid #000;
  }

  #portfolio .portfolioItem .portfolioItemImage {
    margin:0px;
    padding:0px;
  }

再次;这可以做到吗？以及如何？

谢谢!

Answer 1

我认为你想要的是jQuery Masonry或 Wookmark jQuery Plugin .