自适应布局
自适应
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>position</title> <style type="text/css"> #wrap {*zoom: 1; position: relative;} #sidebar {width: 200px; float: right; border:1px solid #ccc;} #content {margin-left: -210px; float: left; width: 100%;} #contentb {margin-left: 210px; border: 1px solid #ccc;} </style> </head> <body> <div id="wrap"> <div id="content" style="height:140px;"> <div id="contentb"> content自适应区，在前面 </div> </div> <div id="sidebar" style="height:240px;">sidebar固定宽度区</div> </div> <!-- <div id="foooter">后面的一个DIV，以确保前面的定位不会导致后面的变形</div> --> </body> </html>
shuangfeiyi.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>固比固解决方案二——双飞翼布局</title> <style> .left { width: 200px; height: 150px; background-color: red; float: left; margin-left: -100%; } .right { width: 150px; height: 150px; background-color: green; float: left; margin-left: -150px; } .middle { width: 100%; height: 150px; background-color: yellow; float: left; } .m_content { margin-left: 200px; margin-right: 150px; word-break: break-all; } </style> </head> <body> <div class="one"> <div class="middle"> <div class="m_content"> 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! 我是菜鸟！work one! </div> </div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
shengbei.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>固比固解决方案一——圣杯布局</title> <style> .left { width: 200px; height: 150px; background-color: red; float: left; margin-left: -100%; position: relative; left: -200px; } .right { width: 150px; height: 150px; background-color: green; float: left; margin-left: -150px; position: relative; left: 150px; } .middle { width: 100%; height: 150px; background-color: yellow; float: left; } .one { padding: 0 150px 0 200px; min-width: 400px; } </style> </head> <body> <div class="one"> <div class="middle"> 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ 我是菜鸟！ </div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
clear_float1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>清除浮动一，给孩子添加兄弟，且给clear:both属性</title> <style> .common { width: 200px; height: 200px; float: left; } .test1 { background-color: red; } .test2 { background-color: blue; } .two { width: 400px; height: 200px; background-color: yellow; } .clr { clear: both; height: 0; line-height: 0; font-size: 0; display: block; overflow: hidden; } </style> </head> <body> <div class="one"> <div class="common test1"></div> <div class="common test2"></div> <div class="clr"></div> </div> <div class="two"> </div> </body> </html>
clear_float2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>清除浮动二，给父亲添加伪元素，且给clear:both属性</title> <style> .common { width: 200px; height: 200px; float: left; } .test1 { background-color: red; } .test2 { background-color: blue; } .two { width: 450px; height: 200px; background-color: yellow; } /*给父元素的后面添加子元素，后使用clear: both属性*/ .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { zoom:1; } </style> </head> <body> <div class="one clearfix"> <div class="common test1"></div> <div class="common test2"></div> </div> <div class="two"> </div> </body> </html>
clear_float3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>清除浮动三，给父亲添加闭合伪元素，且给clear:both属性</title> <style> .common { width: 200px; height: 200px; float: left; } .test1 { background-color: red; } .test2 { background-color: blue; } .two { width: 450px; height: 200px; background-color: yellow; } /*给父元素的两边都添加子元素，后使用clear: both属性*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { zoom:1; } </style> </head> <body> <div class="one clearfix"> <div class="common test1"></div> <div class="common test2"></div> </div> <div class="two"> </div> </body> </html>
