設定左側寬度為200px，向左浮動；
設定右側margin-right，為左側盒子寬度；
.header
.content
.left
.content
.right
.footer
class="header">logo
div>
class="content">
class="left">固定寬度div>
class="right">寬度自適應div>
div>
class="footer">footdiv>效果如下圖所示：
用上面的方法，將右側元素設為向右浮動，並設定其寬度為200px，但是並沒有實現。。會出現如下所示的錯位現象：
解決方法有多種：
交換content中left和right的位置，將right放在前面，即：
class="content">
class="right">寬度固定div>
class="left">寬度自適應div>
div>這個方法的要注意的就是要將固定寬度的元素寫在寬度自適應元素的上面，才能保證在標準文件流下，先布局固定寬度的元素，這樣，剩下的區域自然將沒有寬度的元素嵌入進去，即實現寬度自適應。
在不改變文件流從上到下，從左到右的布局順序的情況下：
設定包裹元素（.content）為相對定位；
設定寬度固定的元素為絕對定位，且top：0；right：0；
.content
.content
.left
.content
.right
為了解決這個問題，借鑑文章：大致思路如下：
為了使footer在content之後，則肯定不能使用絕對定位，因為目前還沒有發現能像清除浮動影響那樣（clear：both），消除絕對定位對兄弟元素的影響，因此要用浮動；
但是，用了浮動之後，寬度自適應的元素.left就會失去自適應寬度資訊，為此，我們將.left的寬度設為100%；
這樣，left中元素的內容也就被向左移動了負值，在視窗中消失，為此，我們給左側元素增加乙個包裹層（left-wrap）設定left-wrap的內填充為向左移動的距離；
**如下：
.header
.content
.left-wrap
.content
.left-wrap
.left
.content
.right
.footer
class="header">logo
div>
class="content">
class="left-wrap">
class="left">固定寬度自適應div>
div>
class="right">寬度固定div>
div>
class="footer">footdiv>
body>將包裹元素content設定為：display：table；width:100%;（不設定寬度將會以table-cell的寬度撐開）
將其中包裹的元素都設定為：display：table-cell;
瀏覽器支援情況：支援火狐瀏覽器，谷歌、opera要分別在前面加字首-webkit-和-o-，不支援ie瀏覽器；
定義包裹層.content為display:flex;
右側為固定寬度200px；
左側自適應寬度，占用瀏覽器剩下的所有空間，因此左側設定flex:1;
.content
.content
.left
.content
.right
CSS布局 左定寬度右自適應寬度並且等高布局
今天有位朋友一早從妙味課堂轉來乙個有關於css布局的面試題，需要解決，花了點時間寫了幾個demo,放上來與大家分享受。那麼我們在看demo之前一起先來看看這個面試題的具體要求吧 左側固定寬，右側自適應螢幕寬 左右兩列，等高布局 左右兩列要求有最小高度，例如 200px 當內容超出200時，會自動以等...
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...
布局左固定右自適應
存在乙個問題就是當螢幕縮小至一定寬度的時候，邊框欄會被擠開 1body 67 8margin 0 auto 9 11 12background color bd9c8c 13 15.header 2324 2526 width 80 27margin 0 auto 28 29.main conten...