怎样用CSS实现中间自适应的三栏布局效果

发布时间：2023-10-20 15:33:24 所属栏目：语言来源：

导读：其中中间这紫色的一栏的大小随字体的多少而变宽/变窄，且多出的文字自动省略为[...],右边的绿色栏要紧紧连着紫色这一栏。主要对紫色这一栏的操作为：

1.flex: 0 1 auto (自适应)

2.text-overflow:ellipsis;

其中中间这紫色的一栏的大小随字体的多少而变宽/变窄，且多出的文字自动省略为[...],右边的绿色栏要紧紧连着紫色这一栏。主要对紫色这一栏的操作为：

1.flex: 0 1 auto (自适应)

2.text-overflow:ellipsis;(自动省略文字)

overflow:hidden;

white-space: nowrap;

完整的代码如下

// CSS 部分

.container {

  display: flex;

}

.pic {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background-color: pink;

}

.name {

  flex:0 1 auto;

  height: 100px;

  background-color: purple;

  text-overflow:ellipsis;

  overflow:hidden;

  white-space: nowrap;

}

.tag {

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

  background-color: seagreen;

}

// HTML 部分

<div class="container">

    <div class="pic"></div>

    <div class="name">

        zhasansndfdkfnald

    </div>

    <div class="tag">设计师</div>

</div>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!