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分析クラスの生徒のテストの成績と生活費
推薦する
MySQL の group by と order by を一緒に使用する方法
テーブル：reward（報酬テーブル）があるとします。テーブル構造は次のようになります。 テーブルt...
vue-cli4.5.xはプロジェクトを素早く構築します
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
UbuntuにProtobuf 3をインストールするための詳細なチュートリアル
いつインストールするかprotoc コマンドを使用しても Protoc が見つからない場合は、インス...
Linux での MySQL の文字化け問題の解決方法
プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...
Vite2.0の落とし穴
目次Viteプロジェクトビルドの最適化他のやっとこれは前回の記事の補足です。設定プロジェクトで遭遇し...
Linux で ffmpeg をインストールするための詳細なチュートリアル
1. CentOS Linuxにffmpegをインストールする1.ダウンロードして解凍する http...
画像の色を変更するための純粋なCSS
画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。ヒ...
Mysql通信プロトコルの詳細な説明
1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...
Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法
ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...
Nodeはkoa2を使用してシンプルなJWT認証方式を実装します
JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...
Oracle を MySQL に置き換える際の問題と解決策
目次移行ツールアプリケーション変換mysql8.0 ドライバ パッケージを追加データソース構成の変更...
docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。
現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...
ウェブページを作るときに注意すべき5つのポイント
1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...
JavaScript の基本変数
目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....