会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い領域のデータを反転し(つまり、下から数えて、数字は1、2、3、4、5)、下部に表示する必要があります。 フレックスレイアウトを使用して実装 <スタイル> *{ マージン: 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 メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直...
目次現象根本原因分析getLastPacketReceivedTimeMs() メソッドの呼び出し時...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...
目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...
親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...
この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
まず、Docker がインストールされたサーバーが必要です。 (私はすでにこれをサーバーにインストー...
目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...
** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...
最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...
MySQL proxies_priv(シミュレートされたロール)を使用して同様のユーザーグループ管理...
JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...