Twitter Bootstrap (元のフィドル) で同じ高さの列を作成する方法に関するこの質問を拡張します。
列の高さは一致しましたが、キャプションを下部に垂直に揃える必要があります。
ここに新しいフィドルがあります。
ご覧のとおり、H2 キャプションが並んでいません。
これが私がそれをどのように見せたいかです：
キャプションがメディア ブレークでテキストから分離されるため、次の文字列で新しい文字列を開始する<div class="row-fluid col-wrap">ことはできません。
問題は、元の質問からの答えが、これらの各 div の高さをほとんど無限に設定することです。コンテンツの後、div は延々と伸びます。
その欠点は、この要素の底がどこにあるかわからないことです。
パディングはコンテンツに合わせてサイズ調整されます: しかし、要素は永遠に引き伸ばされます
要素がどこで終了するかを知っている要素の 1 つがラッパーです。それが仕事でした。.col-wrapそのため、ヘッダー タグをコンテナー に対して相対的に配置する必要があります。
要素をその祖父母に対して相対的に配置するには、孫positionを に設定しますabsolute。これは、見つかった最初の親要素に対してpositionequal toで相対的に配置されrelativeます。col-wrapしたがって、次のコードを使用して、コンテナーの下部にヘッダーを設定できます。
HTML
<div class="row-fluid col-wrap">
<div class="span4 col well">
<p>left column</p>
<h2>Title or Caption</h2>
</div>
</div>
CSS
.col-wrap {
overflow: hidden;
position: relative;
}
.col-wrap > .col > h2{
position: absolute;
bottom: 0;
}
調整しなければならないことの 1 つは、ヘッダーが完全に配置され、ドキュメント フローから取り出され、スペースを占有しなくなったことです。これを回避するハックな方法は、ヘッダー タグを 2 倍にし、1 つをプレースホルダーとして使用することです。
HTML
<h2 class='absolute'>Title or Caption</h2>
<h2 class='relative'>Title or Caption</h2>
CSS のクイック概要:
visibility: hidden; /* hides an element but still takes up the same space*/
display: none; /* hides an element and collapses*/
それを使用して：
visibility、hidden絶対ヘッダーを親の親の下部に配置します。CSS では、次のようになります。
@media (min-width: 768px) {
.col > h2.absolute{
position: absolute;
bottom: 0;
}
.col > h2.relative{
visibility: hidden;
}
}
@media (max-width: 767px) {
.col > h2.absolute{
display: none;
}
}
最後に、h2要素が絶対的に配置されているため、列はテキストがこぼれるのを防ぐためのコンテナーのようには機能しなくなります。これは、目に見える絶対配置要素にサイズ制限を適用することで修正できます。これらは、プレースホルダーの制約を模倣して並べるために実行する必要があります。
span4次の css だけでなく、絶対ヘッダーにもクラスを適用できます。
<h2 class='absolute span4'>Title or Caption</h2>
.col > h2.absolute{
margin-left:0;
padding-right:40px;
}
次のようになります。
