CSS を使用して複数の方法で下揃えを実装するサンプルコード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。

効果の説明:

1. 赤い領域のデータを反転し（つまり、下から数えて、数字は1、2、3、4、5）、下部に表示する必要があります。
2. データが多すぎる場合は、スクロールバーを表示し、スクロールバーを一番下まで引っ張る必要があります。
3. データはWebSocketからプッシュされ、プッシュ間隔は数十ミリ秒です。
4. IE10以降のブラウザと互換性がある必要がある

フレックスレイアウトを使用して実装

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
        ボックスのサイズ: 境界線ボックス;
    }
    。容器{
        位置: 相対的;
        幅: 300ピクセル;
        高さ: 500px;
        マージン: 10px 自動;
        境界線: 1px 実線 #f60;
        色: #fff;
    }
    。トップ、
    。底{
        高さ: 50%;
        パディング: 20px;
    }
    。トップ{
        背景色: #da2e22;
    }
    .トップ>ul{
        幅: 100%;
        高さ: 100%;
        オーバーフロー:自動;
    }
    。底{
        オーバーフロー:自動;
        背景色: #1e1e1e;
    }
</スタイル>

<div class="コンテナ">
    <div class="top">
        <ul style="padding-top: 104px;">
            <li>私は最初の li 要素です</li>
            <li>私は2番目のli要素です</li>
            <li>私は3番目のli要素です</li>
            <li>私は4番目のli要素です</li>
            <li>私は5番目のli要素です</li>
        </ul>
    </div>
    <div class="bottom">
        <ul>
            <li>私は最初の li 要素です</li>
            <li>私は2番目のli要素です</li>
            <li>私は3番目のli要素です</li>
            <li>私は4番目のli要素です</li>
            <li>私は5番目のli要素です</li>
        </ul>
    </div>
</div>

現時点では、フレックスレイアウトを使用するのが最善の解決策です。サブ要素は、1、2、3、4、5 の順序でレイアウトされます。レンダリング時にブラウザーは自動的に反転し、スクロールバーも反転します。つまり、自動的に下に配置されます。しかし、IE10 はまだ ~ をサポートしていないため、私が取り組んでいるこのプロジェクトでは使用できず、別の方法を見つける必要があります。

padding-topを使用して達成する

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
        ボックスのサイズ: 境界線ボックス;
    }
    。容器{
        位置: 相対的;
        幅: 300ピクセル;
        高さ: 500px;
        マージン: 10px 自動;
        境界線: 1px 実線 #f60;
        色: #fff;
    }
    。トップ、
    。底{
        高さ: 50%;
        パディング: 20px;
    }
    。トップ{
        背景色: #da2e22;
    }
    .トップ>ul{
        幅: 100%;
        高さ: 100%;
        オーバーフロー:自動;
    }
    。底{
        オーバーフロー:自動;
        背景色: #1e1e1e;
    }
</スタイル>

<div class="コンテナ">
    <div class="top">
        <ul style="padding-top: 104px;">
            <li>私は最初の li 要素です</li>
            <li>私は2番目のli要素です</li>
            <li>私は3番目のli要素です</li>
            <li>私は4番目のli要素です</li>
            <li>私は5番目のli要素です</li>
        </ul>
    </div>
    <div class="bottom">
        <ul>
            <li>私は最初の li 要素です</li>
            <li>私は2番目のli要素です</li>
            <li>私は3番目のli要素です</li>
            <li>私は4番目のli要素です</li>
            <li>私は5番目のli要素です</li>
        </ul>
    </div>
</div>

padding-top を使用するのが最も簡単な実装方法ですが、純粋な CSS では実装できません。JS を使用して計算する必要もあります。プロジェクトの開始時には、padding-top+js 計算を使用して実装しました。この方法は実装が快適ではありません。Websocket によってデータがプッシュされるたびに、計算を実行する必要があります。では、もっと良い方法はあるのでしょうか?答えは間違いなく「はい」です。CSS の世界では、常に予期せぬサプライズがあります。重要なのは、強力な社内スキルを持つことです。

テーブルセルを使用して実装する

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
        ボックスのサイズ: 境界線ボックス;
    }
    。容器{
        位置: 相対的;
        幅: 300ピクセル;
        高さ: 500px;
        マージン: 10px 自動;
        境界線: 1px 実線 #f60;
        色: #fff;
    }
    。トップ、
    。底{
        高さ: 50%;
        パディング: 20px;
        オーバーフロー:自動;
    }
    。トップ{
        背景色: #da2e22;
    }
    .トップコンテナ{
        表示: テーブル;
        幅: 100%;
        高さ: 100%;
    }
    .トップコンテナ>ul{
        表示: テーブルセル;
        垂直方向の位置合わせ: 下;
        幅: 100%;
        高さ: 100%;
    }
    。底{
        背景色: #1e1e1e;
    }
</スタイル>

<div class="コンテナ">
    <div class="top">
        <div class="トップコンテナ">
            <ul>
                <li>私は最初の li 要素です</li>
                <li>私は2番目のli要素です</li>
                <li>私は3番目のli要素です</li>
                <li>私は4番目のli要素です</li>
                <li>私は5番目のli要素です</li>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <ul>
            <li>私は最初の li 要素です</li>
            <li>私は2番目のli要素です</li>
            <li>私は3番目のli要素です</li>
            <li>私は4番目のli要素です</li>
            <li>私は5番目のli要素です</li>
        </ul>
    </div>
</div>

テーブルセルを使用して下揃えを実現するのが現在のところ最後の解決策であり、IE8 とも互換性があります。下揃え問題は解決しました。「スクロールバーを下に引っ張る必要がある」という問題は、table-cell では実現できません。js を使用して制御するしかありません。偉大な神様は他に解決策を持っているのでしょうか?

CSS テーブルとテーブルセルのレイアウトは、多くの特殊効果を実現できます。詳細については、私が知っている Zhang Xinxu の display: table-cell のアプリケーションを参照してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: WeChatミニプログラムQRコード生成ツール weapp-qrcode 詳細説明

>>: Linux DockerでSpringbootプロジェクトを実行するための詳細な手順