display: table-cellCSS の「等高列」、「Holy Grail」レイアウト、巧妙な実装、そしてもちろんいくつかのおいしいdisplay: flexアイデアの例がたくさんあります。SO には特にそうです。
しかし、私は他のどこにも見つけることができず、むしろ避けたいJSに頼らなければ達成できなかったことを達成しようとしています。
カード間で高さを共有する子要素のセットを持つ、同じ高さの親コンテナーのセットを作成しようとしています。各カードは、ガターによって隣接する他のカードから分離されています。どうやら私は新人なので画像を投稿できないようですが、視覚的に説明する方がはるかに簡単です。無料の画像ホスティング サイトへのリンクは次のとおりです: http://postimg.org/image/ltcd8ns1l/
画像には、3 つのカード (1、2、3) があり、それぞれに 3 つのセクション (1a、1b、1c、2a、2b、2c、3a、3b、3c) があります。カード内の各セクションは、他のカードの同等のセクションと同じ高さです (つまり、1b = 2b = 3b、1c = 2c = 3c など)。同等の各セクション (例: 1b、2b & 3b) の高さは、それらのセクションの中で最も高いセクション (つまり、最も高い「b」) の高さによって決まります。最も高いセクションの高さは、このセクション内のコンテンツの量によって決まります。
カード間のガター用の個別の「テーブルセル」要素を含む方法を使用して、これを視覚的に達成できましたdisplay: tableが、残念ながら、マークアップは無秩序で意味がありません。次のようなものです。
<div class="table-row">
<div class="heading">heading</div>
<div class="gutter"></div>
<div class="heading">heading</div>
<div class="gutter"></div>
<div class="heading">heading</div>
<div class="gutter"></div>
</div>
<div class="table-row">
<div class="body">body text here</div>
<div class="gutter"></div>
<div class="body">body text here</div>
<div class="gutter"></div>
<div class="body">body text here</div>
<div class="gutter"></div>
</div>
<div class="table-row">
<div class="foot">footer</div>
<div class="gutter"></div>
<div class="foot">footer</div>
<div class="gutter"></div>
<div class="foot">footer</div>
<div class="gutter"></div>
</div>...最悪。
だから私も何かを動かすことができましたdisplay: flex。CodePen の簡単なデモを次に示します: http://codepen.io/anon/pen/xbXWpQ
後世のために、HTML は次のとおりです。
<div class="flex-wrap">
<div class="flex-container">
<a href="#">
<div class="image">
<div class="sample-image-one"></div>
</div>
<div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
</div>
<div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</div>
<div class="foot">footer: Sed ut perspiciatis unde omnis.</div>
</a>
<a href="#">
<div class="image">
<div class="sample-image-two"></div>
</div>
<div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</div>
<div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</div>
<div class="foot">footer: Sed ut perspiciatis unde omnis iste natus error sit.</div>
</a>
<a href="#">
<div class="image">
<div class="sample-image-three"></div>
</div>
<div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error</div>
<div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
<div class="foot">footer: Sed ut perspiciatis.</div>
</a>
</div>
</div>そしてSCSS：
// wrap & global styles
body, html {
margin: 0;
width: 100%;
}
.flex-wrap {
padding: 3%;
font-family: sans-serif;
}
.flex-container {
display: flex;
flex-wrap: wrap;
> div {
margin-right: 3%;
width: 25%; // should be 29.33333% but this doesn't seem to work in codepen
color: white;
padding: 15px;
}
}
// image sections
.image {
min-height: 100px;
order: 1;
background-color: teal;
> div {
background-color: coral;
padding: 10px;
}
&:nth-of-type(3n+3){
margin-right: 0;
}
}
// sample images of different heights
.sample-image-one { height: 120px; }
.sample-image-two { height: 160px; }
.sample-image-three { height: 80px; }
// copy sections
.heading {
order: 2;
background-color: tomato;
&:nth-of-type(3n+4){
margin-right: 0;
}
}
.body {
order: 3;
background-color: deepskyblue;
&:nth-of-type(3n+5){
margin-right: 0;
}
}
.foot {
order: 4;
background-color: gold;
&:nth-of-type(3n+3){
margin-right: 0;
}
}
flex正しい順序であり、無意味な要素が含まれていないため、私は HTML を使用する方がはるかに好きです。
しかし、それだけでは十分ではありません。各カードを独自の要素内にラップできるようにしたいのです。<article>...</article>. 部分的にはカード全体をリンクにすることができますが、私の目には、これにより、より明確で適切に分離されたマークアップが提供されるからです。しかし、そうはいきflexませんので、大変です。
私は何年もの間いじりましたが、JS または厄介な HTML を使用せずにこれを行う方法がわかりません。どちらも私は避けたいと思います。
そのようなことを達成する方法についてのアイデアはありますか?