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

Z时代
2024-01-10
分类：技术分享

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

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

回答

    <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>

.bg {
  display: flex;
}
.bg > div:nth-of-type(1) {
  flex: 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>

以上是 [CSS面试题] 如何使得左右两边没有确定宽度的元素保持其中文本的自适应的全部内容，来源链接： utcz.com/a/64989.html