1

私が作成しているWebアプリケーションの場合（Umbracoで、ただしこの場合はそれほど重要ではないと思います）、さまざまなメディアタイプの概要を表示できるページが必要です。オーディオ、ビデオ、画像。

問題ありません。画像と動画（YouTubeでホストされている）の場合はサムネイルを表示し、音声の場合は静止画像を表示します。

アイテムの大まかなレイアウトは、画像が上に表示され、その下にタイトルや簡単な説明などの情報が表示されるようになります。

画像のサイズが異なるため（サムネイルのサイズは可変である可能性があり、オーディオの静止画像はおそらくサムネイルよりも常に小さいなど）、あるアイテム（または必要に応じて列）の幅を他のアイテムよりも小さくすることができます。 。
私がやりたいのは、行ごとに3つのアイテムを表示することです。行が完全に埋められていない場合は、色付きのボックスで埋めたいと思います。ただし、そのボックスは常に最後にある必要はなく、その中間または最初にある可能性もあります。スペースの塗りつぶしが必要な場合は、「ランダムに」挿入されます。

写真には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

これがあなたが探しているものだと思いますが、TABLES の代わりに DIV を使用してグリッドを作成しますか?:

#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 に答える