WebWedge.jpg

phpとかJSとか適当に書いています。

左右に並列に並ぶカラムの子要素の高さを合わせよう

兄弟要素の高さを合わせるならflexでいいわけですが、その子要素(いとこ要素)のheightを合わせるならJavascriptでやるのがまあ良いかなって思うって話と、ボタン位置を合わせるだけならCSSだけでいいよねって話


まずはいとこ要素の高さを合わせたい方の話。

左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム左側のカラム
孫要素 .text


子要素 .child

右側のカラム右側のカラム右側のカラム右側のカラム
孫要素 .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


子要素 .child

右側のカラム右側のカラム右側のカラム右側のカラム
孫要素 .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


子要素 .child

右側のカラム右側のカラム右側のカラム右側のカラム
孫要素 .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%;
}

Categories

CSS, Javascript, コーディングとか

COMMENTS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です