左侧固定 右侧自适应三种方法
生活随笔
收集整理的這篇文章主要介紹了
左侧固定 右侧自适应三种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種：float 單一層浮動法
例如：左側固定成100px; 則核心代碼 左側：width:100px;float:left; 右側 width:auto;margin-left:100px;
實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0;padding:0;} .container{height:200px;} .left{width:100px;border-right:none;height:50px;float:left;background-color:yellow;} .right{margin-left:100px;width:auto;height:100px;background-color:blue;} </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>第二種 定位 ，在固定元素上加入絕對定位，自適應元素設置成margin-left:固定元素的寬度
?實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0;padding:0;} .container{height:200px;} .left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;} .right{margin-left:100px;height:100px;background-color:yellow;} </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>第三種 定位 ，用css3的 calc()進行計算
?實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0;padding:0;} .container{height:200px;} .left{width:100px;height:50px;background-color:blue;} .right{width: calc(100% - 100px); height:100px;background-color:yellow;} </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>?
轉載于:https://www.cnblogs.com/liuna/p/7229479.html
總結
以上是生活随笔為你收集整理的左侧固定 右侧自适应三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （转）Redis研究（一）—简介
- 下一篇： spring历史背景