ホームページ > 記事 > ウェブフロントエンド > CSS レイアウト: 左側は固定幅、右側はアダプティブ_html/css_WEB-ITnose
CSS レイアウト: 左側は固定幅、右側はアダプティブ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:58879ブラウズ
左側が固定幅、右側が適応幅です
それを実現するにはたくさんの方法があります
ウィンドウを縮小してみてはいかがでしょうか？
オプション 1:
左にフロートし、右側にマージン左を追加します
デモを見る
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(1)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px solid #333; background: #aaa; } .right{ margin-left:200px; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html>
オプション 2: 左に浮き、オーバーフロー右側: 非表示 ただし、この方法は IE6 と互換性がありません
Viewdemo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(2)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px solid #333; background: #aaa; } .right{ overflow: hidden; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html>
オプション 3:
左側に絶対配置を使用し、右側にマージン左を使用します
デモを見る
すごい
オプション 4:左側に絶対位置決め、右側に絶対位置決め
デモを見る
そうだねオプション 5:
この方法は比較的複雑で、右側の div 内に別の div があります
Viewdemo
<!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 charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(3)</title><style type="text/css"> *{margin: 0;padding: 0;} .left{ position: absolute; top: 0; left: 0; width: 200px; border: 1px solid #333; background: #aaa; } .right{ margin-left:200px; border: 1px solid #333; background: #ccc; word-break: break-all; }</style></head><body> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div></body></html>