关于固定与自适应

左边固定，右边自适应的demo。

1. 左边使用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）;

2. 我们也可以对右边的标签设置 float：left 但是不建议使用浮动布局 ，浮动是魔鬼（出自张鑫旭大神）。

3. 左边设置为 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>