左右定宽，中间自适应
有几种方法可以实现
改变窗口大小看看？
方案一：
左右设置绝对定位，定宽，中间设置margin-left margin-right
查看 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{ position: absolute; top: 0; left: 0; width: 200px; border: 1px solid #333; background: #aaa; } .right{ position: absolute; top: 0; right: 0; width: 220px; background: #aaa; } .middle{ margin-left: 200px; margin-right: 220px; 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="middle"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> </body> </html>
方案二：
采用负边距处理。左中右都float：left;
中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right
左边加上负边距 margin-left:-100% 拉回最左端
右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端
查看 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; margin-left: -100%; width: 200px; border: 1px solid #333; background: #aaa; } .right{ float: left; margin-left: -220px; width: 220px; background: #aaa; } .middle{ float: left; width: 100%; } .middle-inner{ margin-left: 200px; margin-right: 220px; border: 1px solid #333; background: #ccc; word-break: break-all; } </style> </head> <body> <div class="middle"> <div class="middle-inner"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> </div> <div class="left"> <h4>left</h4> <p>oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000</p> </div> <div class="right"> <h4>right</h4> <p>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> </body> </html>
方案三：
左边使用float:left 右边用float:right，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>左右定宽，中间自适应(3)</title> <style type="text/css"> *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px solid #333; background: #aaa; } .right{ float: right; width: 220px; background: #aaa; } .middle{ margin-left: 200px; margin-right: 220px; 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>BBBBBBBBBBBBBB 888888888888888888 BBBBBBBBBBBBBBBBBB 88888888888888888888</p> </div> <div class="middle"> <h4>middle</h4> <p>HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </p> </div> </body> </html>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/industrynews/13185.html