ホームページ > 記事 > ウェブフロントエンド > 3 つの DIV を並べて配置しますが、中央の DIV を中央に配置します。残りの 2 つの幅は、it_html/css_WEB-ITnose の隣の 2 つの DIV に均等に配分されます。
3 つの DIV を並べて配置しますが、中央の DIV を中央に配置します。残りの 2 つの幅は、it_html/css_WEB-ITnose の隣の 2 つの DIV に均等に配分されます。
- WBOYオリジナル
- 2016-06-21 09:47:401866ブラウズ
このために 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
52e49f7d6389bc6d3aecc7e3294234e1 Left
dc6dce4a544fdca2df29d5ac0ea9906b " style="float:left">
5757ef0d0ee9d5c9c1a611867dc0a45e
中央
16b28748ea4df4d9c2150843fecfba68
ca2ec7a64357cdaf3725e76c3b9b9fbcright16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。