CSS を使用して複数の方法で等高レイアウトを実装するサンプル コード

<スタイル>
    body,div,ul,li{マージン: 0;パディング: 0;}
    li{リストスタイル: なし;}
    .テーブルレイアウトコンテナ{
        幅: 50%;
        マージン: 20px 自動;
    }
    .table-row-layout{
        /* 要素の表示がテーブル行に設定されている場合、幅を設定しても効果はありません。そのため、別の div で囲んでから幅を設定する必要があります */
        表示: テーブル行;
    }
    .テーブルセルレイアウト{
        表示: テーブルセル;
        幅: 33.33%;
        パディング: 10px;
        境界線: 1px 実線 #ccc;
        左境界線: なし;
    }
    .table-cell-layout:最初の子{
        左境界線: 1px 実線 #ccc;
    }
</スタイル>

<本文>
    <div class="テーブルレイアウトコンテナ">
        <ul class="テーブル行レイアウト">
            <li class="テーブルセルレイアウト">
                業界の発展は必然的に専門職の細分化を招きますが、フロントエンド分野でも同様です。現在、業界のフロントエンドは、インターフェースの表示、ユーザーエクスペリエンスとアクセシビリティの方向に進んでいます。
                その後、js/nodejsの開発ディレクション、オーディオ/ビデオリッチメディアディレクション、SVG/canvas/webGLのダイナミッククリエイティブ表現とデータ可視化ディレクション、ツール構築ドキュメント管理、社内サイト構築、会議予約、チームビルディング、組織、外部ブランド宣伝のフロントエンド運用ディレクション。
            </li>
            <li class="テーブルセルレイアウト">
                人それぞれの性格特性や成長経験の違いにより、適した方向性も当然異なります。感性豊かでデザインのバックグラウンドを持つ人はユーザーエクスペリエンスに注力でき、論理的かつエンジニアリング的な思考が強い人はバックエンド開発に適しており、数学や物理学に強い人はデータ可視化を検討でき、コミュニケーション力とコーディネーション能力に優れた人はフロントエンドの運用に取り組むことができます。
            </li>
            <li class="テーブルセルレイアウト">
                私が学生だった頃は、みんなとても純粋でした。好きなことを何でも勉強していました。例えば、CSS、Web ページの作成、エフェクトの作成が好きな女の子が多かったです。しかし、彼女が仕事を探し始めたとき、
                実際の業界と接触してから、状況は変わり始めました。
            </li>
        </ul>
    </div>
</本文>

<スタイル>
    body,div,ul,li{マージン: 0;パディング: 0;}
    li{リストスタイル: なし;}
    .flex-レイアウト{
        ディスプレイ: フレックス;
        幅: 50%;

        マージン: 20px 自動;
    }
    .flex-item{
        幅: 33.33%;
        パディング: 10px;
        境界線: 1px 実線 #ccc;
        左境界線: なし;
    }
    .flex-item:最初の子{
        左境界線: 1px 実線 #ccc;
    }
</スタイル>

<本文>
    <ul class="flex-layout">
        <li class="flex-item">
            業界の発展は必然的に専門職の細分化をもたらしますが、フロントエンド分野でも同様です。現在、業界のフロントエンドは、インターフェース表示のユーザーエクスペリエンスとアクセシビリティ、後方 js/nodejs 開発、オーディオ/ビデオリッチメディア、SVG/canvas/webGL 動的効果のクリエイティブ表現とデータ視覚化、ツール構築、ドキュメント管理、内部サイト構築、フロントエンドの運用と保守、会議の予約、チームビルディング、組織、外部ブランドプロモーションなどの方向性を持っています。
        </li>
        <li class="flex-item">
            人それぞれの性格特性や成長経験の違いにより、適した方向性も当然異なります。感性豊かでデザインのバックグラウンドを持つ人はユーザーエクスペリエンスに注力でき、論理的かつエンジニアリング的な思考が強い人はバックエンド開発に適しており、数学や物理学に強い人はデータ可視化を検討でき、コミュニケーション力とコーディネーション能力に優れた人はフロントエンドの運用に取り組むことができます。
        </li>
        <li class="flex-item">
            私が学生だった頃は、みんなとても純粋でした。好きなことを何でも勉強していました。例えば、CSS、Web ページの作成、エフェクトの作成が好きな女の子が多かったです。しかし、就職活動を始めて実際の業界と接してみると、状況は一変した。
        </li>
    </ul>
</本文>

<スタイル>
    body,div,ul,li{マージン: 0;パディング: 0;}
    li{リストスタイル: なし;}
    .marign-layout{
        幅: 50%;
        マージン: 20px 自動;
        オーバーフロー: 非表示;
    }
    。アイテム{
        フロート: 左;
        幅: 30%;
        パディング: 10px;
        下マージン: -9999px;
        パディング下部: 9999px;
        境界線: 1px 実線 #ccc;
        左境界線: なし;
    }
    .item:最初の子{
        左境界線: 1px 実線 #ccc;
    }
</スタイル>

<本文>
    <ul class="marign-layout">
        <li class="item">
            業界の発展は必然的に専門職の細分化をもたらしますが、フロントエンド分野でも同様です。現在、業界のフロントエンドは、インターフェース表示のユーザーエクスペリエンスとアクセシビリティ、バックエンドのjs/nodejs開発、オーディオ/ビデオリッチメディア、SVG/canvas/webGLダイナミックエフェクトのクリエイティブ表現とデータ視覚化、ツール構築、ドキュメント管理、内部サイト構築、フロントエンドの運用と保守、会議の予約、チームビルディング、組織、外部ブランドプロモーションなどの方向性を持っています。
        </li>
        <li class="item">
            人それぞれの性格特性や成長経験の違いにより、適した方向性も当然異なります。感性豊かでデザインのバックグラウンドを持つ人はユーザーエクスペリエンスに注力でき、論理的かつエンジニアリング的な思考が強い人はバックエンド開発に適しており、数学や物理学に強い人はデータ可視化を検討でき、コミュニケーション力とコーディネーション能力に優れた人はフロントエンドの運用に取り組むことができます。
        </li>
        <li class="item">
            私が学生だった頃は、みんなとても純粋でした。好きなことを何でも勉強していました。例えば、CSS、Web ページの作成、エフェクトの作成が好きな女の子が多かったです。しかし、就職活動を始めて実際の業界と接してみると、状況は一変した。
        </li>
    </ul>
</本文>