コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

3 つの DIV を並べて配置しますが、中央の DIV を中央に配置します。残りの 2 つの幅は、it_html/css_WEB-ITnose の隣の 2 つの DIV に均等に配分されます。

WBOY
リリース： 2016-06-21 09:47:40
オリジナル
1903 人が閲覧しました

この投稿は zhaishang1 によって最終編集されました: 2013-12-13 09:08:26

このために style:float を使用する必要があることはわかっていますが、3 つの DIV を並べて表示したいと考えています。中央の DIV は 1200px などに固定する必要があります。高さは関係なく、100% にしてから、この 1200px が占めていた幅を削除し、残りの幅に基づいて残りの 2 つの DIV に均等に分配します。この効果は中央の DIV を中央に配置することと同じですが、隣接する 2 つの DIV の幅は同じである必要があります。どのように達成するか?

ディスカッションへの返信 (解決策)

固定側とアダプティブ中央のレイアウトしか見たことがありません。固定中央と両側にアダプティブ レイアウトがあるレイアウトは見たことがありません。

これを実装するにはおそらく js が必要です。
ブラウザドキュメントの幅を計算し、中央の固定幅を減算し、両側のモジュールに均等に分割します。

ブラウザウィンドウの幅が中央のモジュールの幅より小さい場合、両側のモジュールが消えてしまうことはありませんか? ? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div style=" float:left">左</div><div style=" width:1200px; float:left; text-align:center;">中间</div><div style=" text-align:right;">右</div></body></html>
ログイン後にコピー

中央固定幅 1200px

Left

" style="float:left">

中央

right



関連ラベル：
让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度
ソース：php.cn
前の記事：ブラウザ スタイルの問題_html/css_WEB-ITnose 次の記事：ブラウザが左右に伸びても Web ページを中央に保つにはどうすればよいですか_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1860
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2028
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1705
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1609
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1622
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート