关于固定与自适应

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

1. 左边使用inline-block显示 右边也使用display:inline-block。就Ok啦。只不过左边要设定固定宽度，右边不用。

  
fixed-left
   
self-adaption-right

自我认为这种方法是最简单的 。但是这种写法又暴露了一个问题。

image.png

可以明显的从图中看出，为什么两个div标签之间会有间隙呢？？？
我们如果把两个div标签 首尾相连的话 再来看

image.png

我们也可以设置 font-size=0px; 或者letter-space=-1.25px（这个东西是相对的，并不是所有的都适应-1.25）;

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

3. 左边设置为 float 右边margin-left:左边的宽度（或者利用overflow:hidden；属性扼杀掉超出的部分）

我感觉这种做做法 并不算是真正的左边固定，右边自适应的做法。因为这样的话 左边实现了宽度固定 右边的话宽度是100%；

    
fixed-left
    
self-adaption-right

image.png

在写这篇文章的时候我发现了一个问题 百思不得姐啊

我如果在左边浮动元素后加一个 inline-block的元素 之后利用相同的办法 为什么右边的元素就上不去了呢??哎呀呀 这是为啥呀

    
fixed-left
    123
    
self-adaption-right

image.png

//这个问题现在想明白了
因为浮动脱离了标准的流式布局
具体清参考 浅谈css中浮动和清除浮动带来的影响
4 flex实现

image.png

       .box {
            display: flex;
        }
        .fixed {
            width: 100px;
            background-color: #0EAAFE;
        }
        .flex {
            background-color: #e4b9b9;
        }

    
fixed
    
flex