css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度? ...

黑线女王

使用了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深入了解下

huanglong

flexbox，神器

huanglong

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

Zz_侦探

.left {  float: left;  width: 200px;}.right {  margin-left: 220px;}
http://jsbin.com/wuzotabeya
之前随手一答，好多赞 #^_^# 补充下，免得误人子弟。
上面这种方式还要考虑到清除浮动。
不考虑浏览器兼容性的话也可以用 flexbox
http://jsbin.com/tefeyutoba

独孤大侠

看了一圈，又结合自己的经验，总结了一下。
题主可以都了解下，实战中，贵在选择。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
（1）使用float
@柳宇航


<div class="use-float">    <div></div>    <div></div></div>
.use-float>div:first-child{    width:100px;    float:left;}.use-float>div:last-child{    overflow:hidden;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
（2）使用table
<table class="use-table">    <tr>        <td></td>        <td></td>    </tr>    </table>
.use-table{    border-collapse:collapse;    width:100%;}.use-table>tbody>tr>td:first-child{    width:100px;}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
（3）用div模拟table
<div class="use-mock-table">    <div></div>    <div></div></div>
.use-mock-table{    display:table;    width:100%;}.use-mock-table>div{    display:table-cell;}.use-mock-table>div:first-child{    width:100px;}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
（4）使用flex
@何凯


<div class="use-flex">    <div></div>    <div></div></div>
.use-flex{    display:flex;}.use-flex>div:first-child{    flex:none;    width:100px;}.use-flex>div:last-child{    flex:1;}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
效果图：（在以上样式基础上，我又加了高度和边框，才能看到下面的样子。。。）