3 つの DIV を並べて配置しますが、中央の DIV を中央に配置します。残りの 2 つの幅は、it_html/css_WEB-ITnose の隣の 2 つの DIV に均等に配分されます。-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-21 09:47:40

オリジナル

1866 人が閲覧しました

この投稿は 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