这篇文章描述了一种使用CSSFlexbox创建中心对齐的容器的方法，其中包含一个白色背景的.b类元素，以及.c类元素的两种状态（active和icon-color）。此外，还定义了.d类按钮和.e类的选中计数显示，以及具有滚动功能的.g类容器，用于显示被截断的多行文本。
.a {
width: 792px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.b {
width: 358px;
height: 398px;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 5px;
}
.c {
width: 24px;
margin: 0 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.c .active {
background: #ffaa00;
border: 1px solid #ffaa00;
}
.c.icon-color {
color: rgba(0, 0, 0, 0.25);
}
.c.icon-color-active {
color: #ffffff;
}
.d {
width: 23px;
height: 23px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.e .select-count {
font-size: 12px;
font-family: Helvetica, Helvetica-Regular;
font-weight: 400;
text-align: left;
color: #555555;
padding: 0;
margin: 0 0 0 8px;
}
.e {
height: 39px;
border-bottom: 1px solid #dddddd;
padding: 13px 0 12px 8px;
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 14px;
}
.f {
padding: 8px;
}
.g {
height: 300px;
overflow: auto;
margin-top: 6px;
}
.g .ant-tree-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
扫一扫
1893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
