3

テーブルセルを使用したレイアウトがあります。テーブルの使用はかなり時代遅れですが、高さの絶対値を使用せずに各行を同じ高さにするために必要でした

このフィドルまたはこのドラフトを参照してください。

Firefoxで正しく.wrapper表示するには、divが必要でした。.infoboxその前に.infobox、ペアレンティングtd要素にposition:relative.

ホバー効果を表のセル全体に適用したいのですが、その方法を知りたいと思っています。高さと幅に相対値 (em や % など) を使用して、レイアウトをレスポンシブ/流動的にしたいだけです。

編集： OK、@ OneTrickPonyのアイデアを使用して、別の「テーブル行」divでそれらをラップしようとしました。では、「table-row」-div の絶対的な高さを指定vertical-align: middleせずに、両方の「table-cell」-div を同じ高さにするにはどうすればよいでしょうか?

4

2 に答える 2

1

別のオプションがありますが、それがプロジェクトに適しているかどうかは、サポートするブラウザーによって異なります。

http://caniuse.com/#search=flexbox

マークアップを少し単純化し、表を完全に削除しました。

<div id="pictures">
    <article class="entry picture">
        <div class="entry picture">
            <img class="picture" src="./images/150x150.jpg" width="150" height="150"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 alpha headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="articlenk info">Bild zeigen</span>
                </div>
            </a>
        </div>
    </article>

    <article class="entry picture"><div class="picture wrapper">
        <div class="entry picture">
            <img class="picture" src="./images/150x71.jpg" width="150" height="71"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 beta headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="pictures info">Bild zeigen</span>
                </div>
            </a>
        </div></div>
    </article>
</table>

このための CSS は非常に単純ですが、接頭辞は省略しています。

div#pictures {
    display: flex;
    flex-flow: row wrap;
}

article {
    flex: 1 1 50%;
    box-sizing: border-box; /* optional */
    position: relative;
}

div.infobox {
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/NDMTH/1/

Figure/figcaption は記事よりも適切な選択でしょう。

于 2013-01-25T13:47:53.693 に答える
0

わかりましたので、絶対値を定義せずに 2 つ (またはそれ以上) の div の高さを等しい値に設定する方法は実際にはないと考えました。回避策として、私はこの小さなスクリプトを書きました。

$(window).load(function() { /* Important because the script has to "wait" until the content (images) has been loaded */
  $('.picture-row').each(function() {
    var rowHeight = 0;
    $(this).children('.picture.item').each(function() {
      if ($(this).outerHeight() > rowHeight) {
        rowHeight = $(this).outerHeight();
      }
    });
    $(this).children('.picture.item').each(function() {
      $(this).height(rowHeight + 'px');
    });
  });
});
于 2013-01-28T08:45:00.157 に答える