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

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プロジェクトを実行するための詳細な手順

推薦する

CSSメディアクエリのアスペクト比を小さくする方法

CSS メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...

JavaScript関数の詳細な説明これを指す問題

目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...

HTML相対パスの親ディレクトリと子ディレクトリの書き方

親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...

インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明

この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...

@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...

Jenkins の Docker のデプロイとインストール手順

まず、Docker がインストールされたサーバーが必要です。 (私はすでにこれをサーバーにインストー...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)

** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...

画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法

最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

CSS ペイント API: CSS のような描画ボード

1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...

Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する

MySQL proxies_priv(シミュレートされたロール)を使用して同様のユーザーグループ管理...

JavaScript の 50 以上のユーティリティ関数の概要

JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...