左边固定，右边自适应的demo。
-
左边使用inline-block显示 右边也使用display:inline-block。就Ok啦。只不过左边要设定固定宽度，右边不用。
<div class="content">
<div class="fixed-left" style="
display: inline-block;
width: 200px;
background-color: #3caf6e;
">fixed-left</div>
<div class="self-adaption-right" style="
display: inline-block;
background-color: blanchedalmond;
">self-adaption-right</div>
</div>
自我认为这种方法是最简单的 。但是这种写法又暴露了一个问题。
image.png
可以明显的从图中看出，为什么两个div标签之间会有间隙呢？？？
我们如果把两个div标签 首尾相连的话 再来看
</div><div class="self-adaption-right" >
image.png
我们也可以设置 font-size=0px; 或者letter-space=-1.25px（这个东西是相对的，并不是所有的都适应-1.25）;
-
我们也可以对右边的标签设置 float：left 但是不建议使用浮动布局 ，浮动是魔鬼（出自张鑫旭大神）。
-
左边设置为 float 右边margin-left:左边的宽度（或者利用overflow:hidden；属性扼杀掉超出的部分）
我感觉这种做做法 并不算是真正的左边固定，右边自适应的做法。因为这样的话 左边实现了宽度固定 右边的话宽度是100%；
<div class="content">
<div class="fixed-left" style="
width: 200px;
float: left;
">fixed-left</div>
<div class="self-adaption-right" style="
margin-left: 200px;
background-color: coral;
">self-adaption-right</div>
</div>
image.png
在写这篇文章的时候我发现了一个问题 百思不得姐啊
我如果在左边浮动元素后加一个 inline-block的元素 之后利用相同的办法 为什么右边的元素就上不去了呢??哎呀呀 这是为啥呀
<div class="content">
<div class="fixed-left" style="
background-color: royalblue;
width: 200px;
float: left;
">fixed-left</div>
<span style="
display: inline-block;
width: 100px;
background-color: aquamarine;
">123</span>
<div class="self-adaption-right" style="
margin-left: 300px;
background-color: coral;
">self-adaption-right</div>
</div>
image.png
//这个问题现在想明白了
因为浮动脱离了标准的流式布局
具体清参考浅谈css中浮动和清除浮动带来的影响
4 flex实现
image.png
.box {
display: flex;
}
.fixed {
width: 100px;
background-color: #0EAAFE;
}
.flex {
background-color: #e4b9b9;
}
<div class="box">
<div class="fixed">fixed</div>
<div class="flex">flex</div>
</div>
