[CSS面试题] 如何使得左右两边没有确定宽度的元素保持其中文本的自适应

Question

需要实际的代码, 而不是解题思路 :

<div class="bg">
    <div>
        <span>文案文案文案文案文案文案文案文案文案文案文案文案文案文案</span>
    </div>
    
    <div>
        <button>按钮按钮</button>
    </div>
</div>

Answer 1

我也来试试 :

<style type="text/css">
    .bg {
        display: flex;
        justify-content: space-between;
        width: 440px;
        background-color: beige;
        align-items: center;
    }


    img {
        width: 44px;
        height: 44px;
    }

    .left {
        flex: 1;
    }

    .right {
        flex: none;
    }
</style>

其中, html为 :

<div class="bg">
    <img src="https://sponsor-static.segmentfault.com/a0178ced5d32d23e1e29fe810c91de02.jpg" alt="">
    <div class="left">
        <span>文案文案文案文案文案文案文案文案</span>
    </div>

    <div class="right">
        <button>按钮按钮</button>
    </div>
</div>

Answer 2

    <style type="text/css">
        .bg {
            display: flex;
            justify-content: space-between;
        }
        .right {
            flex: 1;
        }
    </style>
<div class="bg">
    <div class="left">
        <span>文案文案文案文案文案文案文案文案文案文案文案文案文案文案</span>
    </div>
    
    <div class="right">
        <button>按钮按钮</button>
    </div>
</div>

Answer 3

html:

<div class="outer">
    <img  class="img" width="32" height="32" src="https://avatar-static.segmentfault.com/151/837/1518375183-54f135ef0d731_big64" alt="">
    <div class="text">
    一文搞懂华为ML Ki成一文搞懂华水电费水电费是为ML Ki成一文搞懂华为ML Ki成fgdfgdfgdfgdfgdfgdfgdgdgdfgdfgdfge你每人每年花胡搜按键
    </div>
</div>

css

.outer{
  width: 260px;  
}

.img{
    width: 100px;
    height: 100px;
    float: right;
}

.text{
    display:inline;
}

Answer 4

.bg {
  display: flex;
}
.bg > div:nth-of-type(1) {
  flex: 1;
}

Answer 5

用两个盒子包裹着左右给个浮动就可以达到，你想要的效果