HTML 左、中央、右の適応レイアウト (calc css 式を使用)
|
最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。 しかし、古い IE ではサポートされていません。すべてのブラウザをサポートするために、ここでは js を使用します。 スクリーンショット:  コード： コードをコピー コードは次のとおりです。<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN"> <html> <ヘッド> <title>MyHtml.html</title> <meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3"> <meta http-equiv="description" content="これは私のページです"> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8"> <スクリプト> var 左、中央、右、幅; window.onload = 関数(){ 左=$('左'); 中心=$('中心'); 右=$('右'); サイズを変更する(); }; window.onresize = 関数() { 試す { 幅 = document.body.clientWidth; center.style.width = (幅 - 左のクライアント幅 - 右のクライアント幅 - 0) + "px"; }キャッチ(e){ //0未満の場合、エラーが報告されます } }; 関数 $(id){ document.getElementById(id) を返します。 } </スクリプト> <スタイル> 本文、html{ 高さ:100%; マージン:0px; パディング:0px; オーバーフロー:非表示; } #左、#中央、#右 幅:200px; 高さ:100px; 背景色:rgb(34,124,134); フロート:左; 高さ:100%; } ＃中心{ 背景色:赤; } </スタイル> </head> <本文> <div id="left"></div> <div id="center"></div> <div id="right"></div> </本文> </html> |
>>: MySQL実践ウィンドウ関数SQL分析クラスの生徒のテストの成績と生活費
推薦する
HTML と CSS の基礎 (必読)
(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...
jQueryはドロップダウンメニューのスライド効果を実現します
Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...
Docker の MySQL 時間とシステム時間の不一致の問題を解決する
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...
JS は VUE コンポーネントに基づいて都市リスト効果を実装します
この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...
Reactはページング効果を実装する
この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...
CSS を使用してサブ要素に応じて異なるスタイルを記述する方法
達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...
マウスを傾けた状態でのフリップナビゲーションの問題に関する研究
この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...
DockerはRedisを起動し、パスワードを設定します
RedisはRedisバージョン5のapline（Alps）イメージを使用します。これは小さくて高速...
Docker の Windows ストレージ パス設定操作
Windows 10 に Docker をインストールする場合、コンテナタイプを Linux コンテ...
MySQLの大規模テーブル最適化ソリューションについての簡単な説明
背景Alibaba Cloud RDS for MySQL（MySQL バージョン 5.7）データベ...
Nginx を使用してグレースケール リリースを実装する
グレースケールリリースとは、白と黒をスムーズに移行できるリリース方法を指します。 ABテストとは、グ...
Dockerでrabbitmqをデプロイする際に発生した2つの問題
1. 背景DockerでRabbitMQをデプロイする際に、次の2つの問題が発生します。問題1: ス...
ウェブテーブルフレームを作成するためのヒント
<br />Web テーブル フレームを作成するためのヒント。 ------------...
VMware で VMware ツールをインストールしてもインストール ファイルが表示されない問題を解決する方法
VMware ツールは VMware の使用に非常に便利です。そのため、VMware ツールをインス...
MySQLはOracleシーケンスに似たソリューションを実装しています
MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...