两列布局左边定宽，右边自适应
生活随笔
收集整理的這篇文章主要介紹了
两列布局左边定宽，右边自适应
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖：
代碼如下：
<html> <head> <title>文章標(biāo)題</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="關(guān)鍵字" /> <style type="text/css"> @charset "utf-8"; /* 防止用戶自定義背景顏色對(duì)網(wǎng)頁(yè)的影響，添加讓用戶可以自定義字體 */ html{color: #000;background: #fff;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-size: 100%; } /* IE6對(duì)positon:fixed的單獨(dú)處理修正IE6滾動(dòng)抖動(dòng)的bug */ *html,*html body{background-image:url(about:blank);/*修正IE6滾動(dòng)抖動(dòng)的bug*/background-attachment: fixed;/*根據(jù)自己實(shí)際，非必需*/ } /* 內(nèi)外邊距通常讓各個(gè)瀏覽器樣式的表現(xiàn)位置不同 */ body,div,dl,dt,dd,ul,li,pre,form,fieldset,select,input,textarea,button,p,blockquote,th,td,img,iframe{margin: 0;padding: 0; } body{width: 100%; } /* 要注意表單元素并不繼承父級(jí) font 的問題 */ body,button,input,select,textarea{font: 12px/1.5 "微軟雅黑","Microsoft YaHei","\5b8b\4f53","Tahoma","Arial";color: #333;outline: none; } input,select,textarea{font-size: 100%; } /* 重置button邊框 */ button{border: none; } /* 去掉各Table cell 的邊距并讓其邊重合 */ table{border-collapse: collapse;border-spacing: 0; } /* IE bug fixed: th 不繼承 text-align*/ th{text-align: inherit; } /* 對(duì)齊是排版最重要的因素, 別讓什么都居中 */ caption,th{text-align: left; } /* 去除默認(rèn)邊框 */ fieldset,img{border: none;outline: none;-moz-outline:none; } /* ie6 7 8(q) bug 顯示為行內(nèi)表現(xiàn) */ iframe{display: block; } /* 去掉列表前的標(biāo)識(shí), li 會(huì)繼承 */ ol,ul,li{list-style: none; } /* 來(lái)自yahoo, 讓標(biāo)題都自定義, 適應(yīng)多個(gè)系統(tǒng)應(yīng)用 */ h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: 500;margin: 0;padding: 0; } /* 讓鏈接默認(rèn)不顯示下劃線，在hover狀態(tài)下顯示下劃線 */ a{color: #333;cursor: pointer;outline: none;text-decoration: none;blr:expression(this.onFocus=this.blur()); } a:hover{text-decoration: underline; } /* 清理浮動(dòng) */ .clearfix:before,.clearfix:after{display: block;content: " ";clear: both; } .clearfix{zoom: 1; /* for ie67*/ } /* 重設(shè) HTML5 標(biāo)簽, IE 需要在 js 中 createElement(TAG) */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block; } /* HTML5 媒體文件跟 img 保持一致 */ audio,canvas,video{display: inline-block;*display: inline;*zoom: 1; } address,caption,cite,code,dfn,em,th{font-style: normal;font-weight: normal; } /*解決盒模型問題css3屬性也可用來(lái)統(tǒng)一FORM元素風(fēng)格*/ .box-sizing{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box; } </style> <style type="text/css"> #left{position:absolute;width:300px;top:0px;left:0px;background:red;height:100%; } #right{background:green;margin-left:300px;height:100%; } </style> </head> <body> <div id="left">左邊定寬</div><div id="right">右邊自適應(yīng)</div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的两列布局左边定宽，右边自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 好听有深意的游戏名字，好听的游戏昵称48
- 下一篇： 渐进式图片加载 progressive-