0514-86177077
9:00-17:00（工作日）
HTML實現2列布局，左側寬度固定，右側自適應
實現一：
<style> body, html{padding:0; margin:0;} // 根據CSS定位，利用浮動或絕對定位，使左側的塊元素脫離常規文檔流,可以與右邊塊元素并列 div:nth-of-type(1){ float: left; //利用浮動 // postion: absolute; //利用絕對定位 // top: 0; // left: 0; width: 300px; height: 200px; background: red; } // 【塊級元素，默認自動填充父元素寬度，霸占一行】 // 當前：右側塊元素寬度=父元素寬度 div:nth-of-type(2){ // 設置margin-left為左側塊元素的寬度。 margin-left: 300px; // 現在：右側塊元素的寬度=父元素寬度-margin-left height: 220px; background: blue; } </style> <html> <div>div1</div> <div>div2</div> </html>
1）設置margin-left之前
2）設置margin-left之后
實現二：
<style> body, html{padding:0; margin:0;} // 根據CSS定位，利用浮動或絕對定位，使左側的塊元素脫離常規文檔流 div:nth-of-type(1){ float: left; //利用浮動 // postion: absolute; //利用絕對定位 // top: 0; // left: 0; width: 300px; height: 200px; background: red; } // FC是普通（常規）文檔流，格式化上下文，是頁面中的一塊渲染區域，有一套渲染規格。BFC是塊級格式化上下文。 // 利用BFC塊級格式化上下文,建立一個隔離的獨立容器 div:nth-of-type(2){ // 改變overflow的值不為visible，觸發BFC overflow: hidden; height: 220px; background: blue; } </style> <html> <div>div1</div> <div>div2</div> </html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
標簽：沈陽 健身房 揭陽 福建 那曲 阿拉善盟 銅陵 湖南
上一篇：使用HTML截圖并保存為本地圖片的實現代碼
下一篇：Html讀取本地文件夾下圖片并顯示的示例代碼
Copyright ? 1999-2012 誠信 合法 規范的巨人網絡通訊始建于2005年
蘇ICP備15040257號-8
