0
私はクライアント用のWordpressテーマを作成し、そのページに列を作成できるように管理しました。しかし、列の高さがわずかに異なり、ボタンが奇妙に見えます。あなた自身のために見ることができますhere。サイトはオランダ語であるが、read-more-buttonsは明らかに互いに整列していない。div列の下に要素を垂直に整列させる
私はa JSFiddleを作成しましたが、その列を同じ高さにすることができましたが、divの下にリンクを整列することはできません。私は、table-row、display: table-cell試してみたなど
.column-main {
display: table-row;
}
.column-page-column {
width: 32%;
display: table-cell;
}
.column-page-column p.call-to-action {
// thought this might, work but it doesn't
display: table-cell;
vertical-align: bottom;
}
article {border: 1px solid red;}<div class="column-main hentry-wrapper column-main-3">
<article class="column-page-column">
\t <div class="hentry-wrapper">
\t \t <header class="entry-header">
\t \t \t <h3 class="entry-title">Title 1</h3>
</header>
\t \t <div class="entry-content">
\t \t \t <p>Blah blah blah</p>
<p class="call-to-action"><a class="button" href="#">Read more</a></p>
\t \t </div>
</div>
</article>
<article class="column-page-column">
\t <div class="hentry-wrapper">
\t \t <header class="entry-header">
\t \t \t <h3 class="entry-title">Title 2</h3>
</header>
\t \t <div class="entry-content">
\t \t \t <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend rhoncus malesuada. Donec a risus nec nunc dignissim egestas eget ac erat. Nullam elementum sagittis sollicitudin.
</p>
<p class="call-to-action"><a class="button" href="#">Read more</a></p>
\t \t </div>
</div>
</article>
<article class="column-page-column">
\t <div class="hentry-wrapper">
\t \t <header class="entry-header">
\t \t \t <h3 class="entry-title">Title 2</h3>
</header>
\t \t <div class="entry-content">
\t \t \t <p>
Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words,
and so on, etc etc etc.
</p>
<p class="call-to-action"><a class="button" href="#">Read more</a></p>
\t \t </div>
</div>
</article>
<div style="clear:both;"></div>
</div>ことが可能です、彼らはお互いに合わせてダウンリンクを移動するには？私はWordpressのテーマをコントロールしているので、必要に応じてhtmlを変更することができます。
2つのオプション。 1）表のタグを使用し、内容をセルに配置します。 'call-to-action'と' entry-content'が異なる行にあることを確認してください。 2）javascriptまたはjQueryを使用します。ページが読み込まれた後、 'entry-content'の高さを決定し、最大高さを見つけます。その後、他のすべてをその高さに設定します。 – bobjoe
はこちらです。https://jsfiddle.net/dmkoeam8/ – Banzay
@bobjoe幸いなことに、2016年（ほぼ2017年）にCSSレイアウトの問題については、「テーブルを使用する」および「JSを使用する」以外にも多くのオプションがあります。 – TylerH