H5W3
当前位置:H5W3 > 问答 > 正文

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

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

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

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

未经允许不得转载:H5W3 » [CSS面试题] 如何使得左右两边没有确定宽度的元素保持其中文本的自适应

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址