CSS3 左右固定大小,中间自适应

分类:HTML&CSS     发布时间:2017-05-17     最后更新:2019-12-15     浏览数:778
CSS3 流式布局。

需求:左右两边是按钮或者图标,贴在边缘,中间是字符串加上一个label,label紧贴在字符串最后,如果中间区域太窄,label不变,过长的字符串自动显示为省略号 ...

实现

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>HTML测试文档</title>
<style>
.item {
  display: flex;
  align-items: center;
  width: 500px;
  margin: 4px 0;
  border: 1px solid red;
}
.item .severity-icon {
  width: 7px;
  height: 7px;
  border-radius: 3.5px;
  background-color: red;
  flex: 0 0 7px;
}
.item h4 {
  display: flex;
  align-items: center;
  flex: 1 1 auto; /*关键点一*/
  margin: 0 5px;
  width: 80%; /*关键点二,这个值一定要比它实际占用的宽度小,如果设置为100%,就会超出item这个框*/
  border: 1px solid blue;
}
.item h4 span {
  overflow: hidden;
  margin-right: 4px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item h4 i {
  flex: 0 0 auto;
  padding: 2px 4px;
  font-size: 10px;
  color: #fff;
  font-weight: normal;
  font-style: normal;
  background-color: #1d1d1d;
}
.item .btn-remove {
  flex: 0 0 16px;
  padding: 0 4px;
  cursor: pointer;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  background-color: gray;
}
</style>
</head>
<body>
  <div class="item">
    <i class="severity-icon"></i>
    <h4>
      <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
      <i>Node.js</i>
    </h4>
    <i class="btn-remove">✕</i>
  </div>
 </body>
 </html>
上一篇: TypeScript 初体验 下一篇: Windows 常用命令