原文:
CSS布局 -- 左侧定宽，右侧自适应
左侧定宽，右侧自适应
有很多种方法可以实现
缩小窗口试试看？
方案一：
左边左浮动，右边加个margin-left
查看 demo
<!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>
方案二：
左边左浮动，右边overflow：hidden 不过这种方法IE6下不兼容
查看 demo
<!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>
方案三：
左边使用绝对定位，右边使用margin-left
查看 demo
<!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>
方案四：
左边绝对定位，右边也绝对定位
查看 demo
<!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>左侧定宽，右侧自适应(4)</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{ position: absolute; left: 200px; top:0; 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>
方案五：
这种方法相对来说就有点复杂了，右边的div里边还有一个div
查看 demo
<!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>左侧定宽，右侧自适应(5)</title> <style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; margin-right: -100%; width: 200px; border: 1px solid #333; background: #aaa; } .right{ float: left; width: 100%; } .inner-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"> <div class="inner-right"> <h4>right</h4> <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888</p> </div> </div> </body> </html>
