1

对于我正在创建的 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;
  }

再次; 可以这样做吗？如何？

谢谢！

4

3 回答 3

0

我会使用 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; }​
于 2012-08-27T14:46:12.740 回答
0

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

仅当您知道包含内容的 div 的宽度以允许浮动发生时，以下内容才有效（如果有最小宽度或您的代码可以确定图像的大小，这可能会起作用）

这是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中的示例。

于 2012-08-27T20:19:06.643 回答
0

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

于 2012-08-31T15:27:02.823 回答