標籤：

css能不能實現左邊div固定寬度，右邊div自適應撐滿剩下的寬度?

01-05

使用了bootstrap的柵格系統，所以父級寬度會不固定。不使用JS的情況下能實現嗎？

利用bfc：

.left{

width:200px;

float:left;

}

.right{

overflow:hidden;

}

右邊盒子觸發bfc，使其不與浮動盒子區域重疊，因此會重新計算寬度。

看下效果

審查一下元素:

左邊div

右邊div

----------------------------------------------------------------------------------------------------------------------------

補充一下：BFC翻譯過來是塊級格式化上下文，和haslayout比較相似，但haslayout是舊版本IE下的一個專有屬性，表示元素自己對自身的內容進行組織和計算。BFC相當於一個獨立的渲染單元，內外元素不會相互影響。我這裡overflow:hidden觸發BFC，利用的是BFC布局的一條特性，就是BFC的區域不會與浮動盒子重疊。BFC有很多特性，也有很多觸發方式，感興趣的同學可以google深入了解下

flexbox，神器

看了一圈，又結合自己的經驗，總結了一下。

題主可以都了解下，實戰中，貴在選擇。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（1）使用float @柳宇航

&
&& && &

.use-float&>div:first-child{
width:100px;
float:left;
}
.use-float&>div:last-child{
overflow:hidden;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（2）使用table

&

& && && & &

.use-table{
border-collapse:collapse;
width:100%;
}
.use-table&>tbody&>tr&>td:first-child{
width:100px;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（3）用div模擬table

&
&& && &

.use-mock-table{
display:table;
width:100%;
}
.use-mock-table&>div{
display:table-cell;
}
.use-mock-table&>div:first-child{
width:100px;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（4）使用flex @何凱

&
&& && &

.use-flex{
display:flex;
}
.use-flex&>div:first-child{
flex:none;
width:100px;
}
.use-flex&>div:last-child{
flex:1;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

效果圖：（在以上樣式基礎上，我又加了高度和邊框，才能看到下面的樣子。。。）

.container { display: flex }
.left { flex: none; width: whatever }
.right { flex: 1 }

這是我經常用來做面試題的題目，當然，多數時候我會考「兩邊定寬，中間自適應」，比這個需求稍微難一點。

「傳統」的實現可以使用絕對定位、負邊距等多種方法，「現代」的實現是使用flex。

.left {
float: left;
width: 200px;
}
.right {
margin-left: 220px;
}

之前隨手一答，好多贊 #^_^# 補充下，免得誤人子弟。

上面這種方式還要考慮到清除浮動。

不考慮瀏覽器兼容性的話也可以用 flexbox

http://jsbin.com/tefeyutoba

回答只為以最簡單的方式實現效果，評論中指出的width:auto實際上會佔滿到100%我想大家都知道，但是對於內容而言，其所佔據的寬度並不會被float的元素覆蓋。

當然，如果你一定要說background這種情況的話，加上margin是正確的，所以如果有希望討論的歡迎記錄評論，但實在不必留下一句優越的批判了。

原答案如下：

=====

反對已有的所有回答啊喂！

calc()確實可以實現但是沒有覺得有些複雜了嘛……

左邊float:left右邊display:block即可……用各種margin是什麼鬼……

圖片示例：

html代碼

&
&我是左邊我是左邊我是左邊我是左邊我是左邊我是左邊我是左邊我是左邊我是左邊我是左邊& &我是右邊我是右邊我是右邊我是右邊我是右邊我是右邊我是右邊我是右邊我是右邊我是右邊我是右邊& &

css 代碼

*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 200px;
position: relative;
}
.right{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width: 100%;
height: 200px;
background: #e5e5e5;
padding-left: 300px;
}
.left{
width: 300px;
height: 200px;
background: #666666;
position: absolute;
top: 0;
left: 0;
}

這在工作中遇到的一個問題，只提供一個新思路，開啟盒子模型怪異模式。不過要css3的屬性，兼容性就不考慮了。歡迎拍磚。

兩個元素都display:block，左側的float:left，寬度寫死。右側的width:auto，margin-left等於左側元素的寬度

可以使用 `clac()` 計算右邊的寬度。可參考CSS3的calc()使用

這種都是經典布局了,你們真的不知道哪有資料能學習么..下面這個是nec的,也可以看看

代碼庫 - NEC : 更好的CSS樣式解決方案

今天碰到一例子這樣也可以實現：

.left{float:left;width:200px;height:200px;background:green;}

.con{width:auto;height:200px;overflow:hidden;background:blue;}

con的width不能設置為100%,不然另起一行，overflow的清除浮動跟clear：both效果還是不一樣，

-------------------------------------------------------

.left｛float：left；width：380px｝.catainer｛float：left；width：100%；margin-left：-380px；｝手機打

正好前幾天看到一篇文章介紹網站的三列布局－－聖杯布局

第一個要求就是中間定寬，兩邊（或一邊）自適應，題主有時間可以研究一下～

CSS布局終極方案之--聖杯布局（兼容IE6+，現代瀏覽器）

一共5種： [1]float [2]inline-block [3]table [4]absolute [5]flex

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

思路一: float

說起兩列布局，最常見的就是使用float來實現。float浮動布局的缺點是浮動後會造成文本環繞等效果，以及需要及時清除浮動。如果各浮動元素的高度不同時，可能會出犬牙交錯的效果

【1】float + margin

　　將定寬的一列使用float，而自適應的一列使用計算後的margin

& p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;}
.right{margin-left: 120px;}
& &
&
&

left& & &
&

right& &

right& & &

[缺點1]IE6-瀏覽器下3像素bug，具體表現在右側首行文字會向右偏移3px。解決辦法是在left元素上設置margin-right: -100px

[缺點2]當右側容器中有元素清除浮動時，會使該元素不與左側浮動元素同行，從而出現文字下沉現象

【2】float + margin + (fix)

　　(fix)代表增加結構，為了解決上述方法中的兩個缺點，可以通過增加結構來實現。自適應的一列外側增加一層結構.rightWrap並設置浮動。要實現自適應效果，.rightWrap寬度必須設置為100%。若不設置，float後的元素寬度將由內容撐開。同時再配合盒模型屬性的計算，設置計算後的負margin值，使兩列元素在同一行顯示。同時兩列之間的間距由.right的margin值確定。由於右側元素會層疊在左側元素之上，.left需要使用relative來提升層級

& p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{position: relative;float: left;width: 100px;}
.rightWrap{float: left;width: 100%;margin-left: -100px;}
.right{margin-left: 120px;}
& &
&
&

left& & &
&
&

right& &

right& & & &

【3】float + margin + calc

　　除了增加結構的方法外，還可以使用calc()

　　[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加減運算

& p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}
.right{float: left;width: calc(100% - 120px);}
& &
&
&

left& & &
&

right& &

right& & &

【4】float + overflow

　　還可以使用overflow屬性來觸發bfc，來阻止浮動造成的文字環繞效果。由於使用overflow不會改變元素的寬度屬性，所以不需要重新設置寬度。由於設置overflow:hidden並不會觸發IE6-瀏覽器的haslayout屬性，所以需要設置zoom:1來兼容IE6-瀏覽器

& p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{ float: left;width: 100px;margin-right: 20px;}
.right{overflow: hidden;zoom: 1;}
& &
&
&

left& & &
&

right& &

right& & &

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

思路2: inline-block

　　inline-block內聯塊布局的主要缺點是需要設置垂直對齊方式vertical-align，則需要處理換行符解析成空格的間隙問題。IE7-瀏覽器不支持給塊級元素設置inline-block屬性，兼容代碼是display:inline;zoom:1;

【1】inline-block + margin + calc

　　一般來說，要解決inline-block元素之間的間隙問題，要在父級設置font-size為0，然後在子元素中將font-size設置為默認大小

　　[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加減運算

& p{margin: 0;}
.parent{font-size: 0;}
.left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}
.right{display:inline-block;vertical-align:top;width:calc(100% - 120px);font-size:16px;}
& &
&
&

left& & &
&

right& &

right& & &

【2】inline-block + margin + (fix)

& p{margin: 0;}
.parent{font-size: 0;}
.left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}
.rightWrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}
.right{margin-left: 120px;}
& &
&
&

left& & &
&
&

right& &

right& & & &

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

思路3: table

　　使用table布局的缺點是元素被設置為table後，內容撐開寬度，所以需要設置width:100%。若要兼容IE7-瀏覽器，需要改為&結構。由於table-cell元素無法設置margin，若需要在元素間設置間距，需要增加結構

& p{margin: 0;}
.parent{display:table;width: 100%;table-layout: fixed;}
.left,.rightWrap{display:table-cell;}
.left{width: 100px;}
.right{margin-left: 20px;}
& &
&
&

left& & &
&
&

right& &

right& & & &

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

思路4: absolute

absolute布局的缺點是由於父元素需要設置為relative，且子元素設置為absolute，所以父元素的高度並不是由子元素撐開的，需要單獨設置。

　　[注意]IE6-不支持相對的偏移屬性同時設置

& p{margin: 0;}
.parent{position: relative;width:100%;height:40px;}
.left{position: absolute;left:0;width:100px;}
.right{position: absolute;left:120px;right:0;}
& &
&
&

left& & &
&

right& &

right& & &

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

思路5: flex

flex彈性盒模型是非常強大的布局方式。但由於其性能消耗較大，適合於局部小範圍的布局

　　[注意]IE9-不支持

& p{margin: 0;}
.parent{display: flex;}
.left{width:100px;margin-right: 20px;}
.right{flex:1;}
& &
&
&

left& & &
&

right& &

right& & &

兩列布局中單列定寬單列自適應布局的5種思路

其實還有一種比較複雜的，優點是兼容性好 (IE6+)，沒有 overflow: hidden 帶來的其他問題，適合場景是需要把主內容區域放在 sidebar 之前的情況:

&
&
&& & && &

CSS:

.outer {
width: 100%;
}

.outer:after {
content: "";
clear: both;
display: table;
}

.main-container {
width: 100%;
display: inline;
float: left;
}

.main {
margin-left: 300px;
}

.sidebar {
float: left;
display: inline;
width: 300px;
margin-left: -100%;
}

這個問題百度沒有？

就這麼個簡單布局，也一堆trick，css這模型真是爛到家了，究竟還要忍它多久？

固定設浮動，自適應設margin，浮動dom先行。

自適應和固定寬度三句真言。弄懂了這個，不管怎麼左自適應，右自適應，三段自適應。全部可以搞定

通過 marginleft 實現 代碼少 兼容好

推薦閱讀：

※怎樣理解 CSS :after 偽元素的作用？
※純CSS3有什麼實現垂直居中的新方法嗎？
※現在前端開發 做網頁 還是一點一點寫html css嗎？看著一個網頁那麼多代碼 那要寫不少啊？有沒有效率點的工具，可以快速做出想要的網頁 比如dw那種能拖的？行業標準一般用什麼方式，工具？
※在 CSS 中，用 float 和 position 的區別是什麼？
※html移動端頁面、圖片多少寬度最合適？

TAG:前端開發 | HTML | CSS | DivCSS | BootstrapTwitter |