最近在百度 IFE 訓練營中看見的一道題目： 用兩種不同的方法來實現一個兩列布局，其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化 個人總結出如下三種實現思路： 通過絕對定位實現 See the Pen absolute-two-column ...

利用bfc：右邊盒子觸發bfc，使其不與浮動盒子區域重疊，因此會重新計算寬度。 效果如圖 補充一下： 　　BFC翻譯過來是塊級格式化上下文，和haslayout比較相似，但haslayout是舊版本IE下的一個專有屬性，表示元素自己對自身的內容進行組織和計算。BFC ...

html: <div class="container"> 　　<div class="left"> 　　　　left固定寬度200px 　　</div> 　　<div class="right"> 　　</div> ...

（1）使用float -------------------------------------------------------------------------- ...

樣式： <style type="text/css"> 　　html,body { height: 100%; padding: 0; margin: 0; } 　　.outer { height: 100%; box-sizing: border-box ...

html 公用css: 1 利用css3 flex css： 2 左邊浮動 3 左右都浮動 使用calc計算右邊的寬度 使用css3 flex，還可以實現，左邊的高度隨右邊的高度而變化； ...

需求： 1. 這個矩形的高度和瀏覽器窗口的高度相同，不能出現縱向滾動條 2. 綠色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML結構暫且如下： 樣式如下： 最重要的部分： 重點是要top和bottom一起使用，這是 ...

需求： 1. 這個矩形的高度和瀏覽器窗口的高度相同，不能出現縱向滾動條 2. 綠色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML結構： 需求1實現： 需求2實現： 需求3實現（絕對布局+top(nav ...