クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
column_general_header02

【css】cssのみで無理矢理高さの違うボックスをきれいに揃える方法

floatで横に並べた【divタグ】の高さが違うことはよくあります。というより、ほとんどではないでしょうか。
そこで無理矢理ではありますが、高さが違うボックスをきれいに揃える方法があります。
【jQuery】のプラグインとかを使用すれば、簡単にできるんですけどね。

CSS

.box{
        overflow:hidden;
        }

        .contents1{
        float:left;
        padding-bottom:10000px;
        margin-bottom:-10000px;
        }

        .contents2{
        float:left;
        padding-bottom:10000px;
        margin-bottom:-10000px;
        }

HTML

        <div class="box">
        <div class="contents1">内容</div>
        <div class="contents2">内容</div>
        </div>
        
author

narumasa(なるまさ)

http://narumasa.com


フリーランスのWebクリエイターとして2001年から活動。
レコーディング・エンジニアとして職歴をスタートし、Webの勉強をすべくスクールに通い、デザイン会社のWebデザイナーへ。2001年に退職後、フリーランスのWebクリエイターとして活動しつつ、商品企画会社に入社し、企画プロデューサー・取締役を経て、再びフリーランスに。
現在はフリーランスのWebクリエイターとして数々の大企業のホームページから街の商店のホームページまで、1人で企画からディレクション、デザイン、コーディング、プログラミングまで全てを担当している。

関連記事