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分析クラスの生徒のテストの成績と生活費
推薦する
Linux カーネル デバイス ドライバー システム コールに関する注意事項
/**************************** * システムコール**********...
MySQL 8.0.23 メジャーアップデート (新機能)
著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...
CSS 共通スタイルで二重矢印を描画するサンプルコード
1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...
実践的な経験を共有するためのコードチェックツールstylelintの紹介
目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...
MySQL データベースは SQL ステートメントを知っている必要があります (拡張バージョン)
拡張版です。質問とSQL文は以下の通りです。ユーザー テーブルを作成し、id、name、gender...
HTML メタビューポート属性の詳細な説明
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
MySQL 8.0.18 ハッシュ結合は左/右結合をサポートしていません 左と右の結合の問題
MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...
VMware Workstation のインストール Linux システム
始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...
CSS における要素の表示モード
CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の...
Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法
Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...
Linux で xargs コマンドを使用する詳細なチュートリアル
みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...
支払いカウントダウンを実現し、ホームページに戻るためのjs
ホーム ページに戻るための支払いカウントダウン ケースの概要: シンプルな js 構文、getEle...
Linux システムの /etc/fstab ファイルの詳細な解釈
序文 [root@localhost ~]# cat /etc/fstab # ＃/etc/fsta...
Nodejs でタイムドクローラーを実装する完全な例
目次事件の原因Node Scheduleを使用してスケジュールされたタスクを実装する1. node-...
Vueは小さなメモ帳機能を実装しました
この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...