兄弟要素の高さを合わせるならflexでいいわけですが、その子要素(いとこ要素)のheightを合わせるならJavascriptでやるのがまあ良いかなって思うって話と、ボタン位置を合わせるだけならCSSだけでいいよねって話
まずはいとこ要素の高さを合わせたい方の話。
左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム
孫要素 .text
孫要素 .text
子要素 .child
右側のカラム右側のカラム右側のカラム右側のカラム
孫要素 .text
孫要素 .text
子要素 .child
親要素#parent
HTML
<div id="parent"> <div class="child"> <div class="text"> 左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム </div> <input type="button" value="ボタン" /> </div> <div class="child"> <div class="text"> 右側のカラム右側のカラム右側のカラム右側のカラム </div> <input type="button" value="ボタン" /> </div> </div>
CSS
#parent { display:-webkit-flex; -webkit-justify-content: space-between; display:flex; justify-content: space-between; } #parent .child { width:45%; padding:20px 2% 5px; }
左と右のカラムの高さを合わせます。
この状態では.textの高さが左右で違っていてボタンの位置が合わないので、Javascriptでheightが高い方に合わせます。
左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム
孫要素 .text
孫要素 .text
子要素 .child
右側のカラム右側のカラム右側のカラム右側のカラム
孫要素 .text
孫要素 .text
子要素 .child
親要素#parent
Javascript
$(document).ready(function() { var max_height = 0; $("#parent .child .text").each(function() { if($(this).height() > max_height) max_height = $(this).height(); }) $("#parent .child .text").height( max_height ); })
そして単純にボタンの位置だけ合わせたいなら別にCSSだけでいいよねって話。
左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム
孫要素 .text
孫要素 .text
子要素 .child
右側のカラム右側のカラム右側のカラム右側のカラム
孫要素 .text
孫要素 .text
子要素 .child
親要素#parent
CSS
#parent { display:-webkit-flex; -webkit-justify-content: space-between; display:flex; justify-content: space-between; } #parent .child { width:45%; padding:20px 2% 30px; } #parent .child input[type="button"] { position:absolute; left:5%; bottom:20px; width:90%; }
COMMENTS