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 が点滅するのを防ぐ方法
推薦する
Centos7 システムでの .NET Core 2.0 + Nginx + Supervisor 環境の構築
1. Linux .NET Core の紹介Microsoft は常に自社のプラットフォームに対して...
Dockerスペースがいっぱいでコンテナに入れない場合の解決策
トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...
Springboot アプリケーションを迅速にデプロイするために Docker とアイデアを統合する詳細なプロセス
目次1. はじめに2. 環境とツール3. Dockerをインストールし、リモート接続を構成する4. ...
WeChatアプレットがシンプルな計算機機能を実装
この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...
MySQLは「order by」がどのように機能するかを簡単に理解します
並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...
個人的な意見: デザインについて語る
<br />最も実用的なものを選んで話しましょう。まず、勤務先の都市を慎重に選ぶ必要があ...
MySQL 8.0.23 メジャーアップデート (新機能)
著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...
Tomcat クラスローダーの実装方法とサンプルコード
Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...
MySQL の frm ファイルからテーブル構造を復元する 3 つの方法 [推奨]
mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...
本をめくる効果を実現するネイティブJS
この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...
VMware仮想マシンでのLinuxのコピー＆ペーストの詳細な説明
1. VMware Workstation 上の Linux: 1. ソースの更新（オプション） v...
Nginx の動的および静的分離実装ケースのコード分析
静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...
Dockerコンテナとホスト間のデータ相互作用の概要
序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...
HTMLバージョン宣言DOCTYPEタグ
通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...
VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...