Question

对于我正在创建的Web应用程序（在Umbraco中，但不认为在这种情况下真的很重要）我需要一个页面，可以显示不同媒体类型的概述;音频，视频和图像。

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

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

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

因为一张图片说的超过1000个单词（我试图描述的线框）;

enter image description here

现在我的问题;这是可能吗？如果是，怎么样？
我不能把它包裹起来，我认为它不能用纯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

我会使用DIV而不是TABLES创建网格，不管我认为这是你想要的吗？：

#portfolio td 
{
    min-width:33%;
}

修改

以下是使用DIV创建的网格的基本示例：

http://jsfiddle.net/rdtnU/

<div class="con"> <div class="row"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell is_last">c</div> </div> <div class="row"> <div class="cell">d</div> <div class="cell">e</div> <div class="cell is_last">f</div> </div> </div> .con {} .row { width:340px; margin:0 0 20px 0; overflow:hidden; } .cell { width:100px; margin:0 20px 0 0; float:left; background:orange; } .is_last { margin:0; }

Answer 2

我会按照建议使用div，但我不会将自己限制在所述的行/列中。即使是某个部分的指定宽度，我也会使用更流畅的布局。

以下内容仅在您知道包含内容的div的宽度时才有效，以允许浮动发生（如果存在最小宽度或者如果您的代码可以确定图像的大小，这可能有效）< / p>

这是HTML

<div class="elements">
    <div class="singleElement">
        text and graphics here. 
    </div>
    <div class="singleElement">
        text and graphics here. 
    </div>
    <div class="singleElement">
        text and graphics here. 
    </div>
    <div class="singleElement">
        thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
    </div>
    <div class="singleElement">
        small text 
    </div>
</div>

这是CSS（我放了一些简单的背景颜色，这样你就可以看到宽度发生了什么，以及如何在可用空间的地方藏起来。

.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left; 
    height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0;  }

请注意，样式的详细信息仅用于演示示例。它们可以根据您的需要进行更改。

示例：以下是jsFiddle中的示例。

Answer 3

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

甚至出空间布局（表）

3 个答案: