I've attached an illustration to help me get my point across!は垂直ので、異なる高さの列の要素
を合わせ、DIV 1とDIV 2（親のDIVの子供たちは）私が構築していますページのカラムであり、その中のコンテンツはでません同じ高さなので、現在ボタンは垂直に並んでいません。
BUTTON 1とBUTTON 2を縦に並べる必要があります（私はPARENT DIVの一番下にあると思います）。
どうすればいいですか？
ありがとうございます！
DIV 1とDIV 2の位置を相対的に適用し、下の詰め物を適用して、その内容がアブソリュートになるようにボタンの内容が重ならないようにすることができます。
例：jsfiddle.net/yy87qdmt/1/
これは素晴らしいことですが、ありがとうございます - しかし、固定された高さなしにそれを行う方法はありますか？このように固定された高さのため、サイトの応答が邪魔になります。 – SRD
親divの相対位置を子divに静的に適用し、子divに応じてボタンの水平位置を分割してみます。子divのテキストが大きくなるにつれて、子divが親divの高さをプッシュするので、ボタンが大きいほうをたどります。 –
私はあなたが離れて位置CSSディレクティブから得ることができるとは思わないが、あなたは下を使用したくない場合は、その数多くのjQueryの例があります論理的にdivを配置することができます。
代わりに（私はあなたがDivsを使いたいと思っているようですが）テーブルを使いやすくすることができます。
彼はCSS –
とタグ付けされています。Ahhありがとうございます。しかし、彼が考えていないかもしれない提案を提供することは、依然として悪い考えではないかもしれません。しかし、あなたは正しい。 –
私は確かに他のメソッドにもオープンしていますが、少しポインタが必要です！私がDIV 1とDIV 2を反応性の高い列として保つことができれば、私はそれで問題ありません！ – SRD
はフレキシボックスはそれを行うことができますFirefoxの-45でプルーフ&とクロム-50
<body>
<main>
<style scoped>
main
{
flex-direction: row;
display: flex;
}
main > figure
{
border: 1px darkgrey solid;
justify-content: flex-end;
flex-direction: column;
box-sizing: border-box;
display: flex;
}
main > figure > :first-child
{
background-color: lightgrey;
flex-grow: 1;
}
main > figure > figcaption
{
background-color: black;
color: lightgrey;
flex-shrink: 1;
}
</style>
<figure>
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<figcaption>
Caption 0
</figcaption>
</figure>
<figure>
<article>
<p>Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur</p>
</article>
<figcaption>
Caption 1
</figcaption>
</figure>
</main>
</body>
をテストしました。
.row {
display: flex;
width: 80%;
margin: auto;
}
.col {
width: 50%;
border: 1px solid grey;
text-align: center;
padding: 1em;
}
img {
width: auto;
max-height: 100%;
}
p {
text-align: justify;
}
/* the magic */
.col {
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
}<div class="row">
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p>
<button>My button</button>
</div>
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam
repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p>
<button>My button</button>
</div>
</div>それは素晴らしく動作します、ありがとうございます！ – SRD
こんにちはSRD、SOへようこそ！あなたは 'position'と' bottom'プロパティでラウンドしなければならないように思えます。これを行う前に、jsfiddle.netで質問を再作成し、ここにリンクを投稿することをお勧めします。これは応答プロセスに役立ちます。 – Frits
あなたがobvioulsyする必要がある最初の事は、列を同じ高さにすることです...そしてそこから行く。 –
CSSフレックスプロパティを使用 –