CSS 位置固定左と右の二重配置実装コード
|
CSS 位置 位置プロパティには 5 つの値があります。
要素は、top、bottom、left、right プロパティを使用して配置できます。ただし、位置プロパティを最初に設定しないと、これらのプロパティは機能しません。配置方法に応じて動作も異なります。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<タイトル></タイトル>
<スタイル>
。箱{
幅: 1400ピクセル;
高さ: 1500ピクセル;
マージン: 0 自動;
}
.box1{
境界線: 1px 実線 #000000;
高さ: 200px;
幅: 200ピクセル;
表示: インラインブロック;
位置: 固定;
}
.box02{
境界線: 1px 実線 #006400;
高さ: 1500ピクセル;
幅: 800ピクセル;
表示: インラインブロック;
マージン: 0 20px;
左マージン: 250px;
}
.box03{
境界線: 1px 実線 #006400;
高さ: 200px;
幅: 200ピクセル;
表示: インラインブロック;
位置: 固定;
}
</スタイル>
</head>
<本文>
<div class="box">
<div class="box1">123</div>
<div class="box02">456</div>
<div class="box03">789</div>
</div>
</本文>
</html>
CSS位置固定左と右の二重配置の実装コードに関するこの記事はこれで終わりです。より関連性の高いCSS位置固定配置コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。 |
<<: 小規模プロジェクトで Vue が点滅するのを防ぐ方法
推薦する
Node.js のモジュール性、npm パッケージ マネージャーの説明
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
CentOS7にNginxをインストールして自動起動を設定する方法
1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...
複数のサーバーにNginxリバースプロキシを実装する方法
Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...
Nginx http を https にアップグレードする手順を完了する
httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...
iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法
私は、WinForm と HTML5 を組み合わせた小さなものを作りたいだけなのですが、突然、そこに...
Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...
Tomcat は親の委任メカニズムを破壊して Web アプリケーションの分離を実現します。
目次Tomcat クラスローダー階層WebAppクラスローダー共有クラスローダーカタリナクラスローダ...
WeChat アプレットカスタムタブバーステップ記録
目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...
Vueコンポーネントの動的コンポーネントの詳細な説明
目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...
Nginx キャッシュ設定例
Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...
各 Nginx プロセスで開くことができるファイルの最大数を設定する方法
1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...
MySQL の異なるテーブル間でフィールドをコピーする
場合によっては、フィールドから別の新しいフィールドにデータの列全体をコピーする必要があります。これは...
JavaScript の Set データ構造の詳細な説明
目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...
JavaScript はクラス宝くじアプレットを実装します
この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹...
Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明
序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...