先展示最终效果
**注:直接复制添加 class='item’的元素 即可实现自动高度变化 **
前言
md,那个吊毛是真给我学习机会啊,给他后,
他又讲 :你这个不会随着里边的内容高度自动变化;
我: 你写个动态样式不就行了?
他: 你看 这个,他还会根据内容自动变高!
我: 代码发出来我看看
(wc有点东西 )
研究了会 也没看懂高度怎么自动变化的(高度是文本撑起来的,左边的花括号的边也是内容的一部分)。但是我来了个移花接木,把我写的圆弧⌒替换下 就成了,不愧是我 ,我真棒
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.base {
position: relative;
width: 100%;
min-width: 300px;
display: table;
}
.base>.row {
display: table-row;
}
.base>.row>.title,
.base>.row>.list {
display: table-cell;
vertical-align: middle;
}
.base>.row>.title {
position: relative;
width: 60px;
padding-right: 10px;
text-align: right;
font-size: 14px;
border-right: 1px solid #373d41;
}
.base>.row>.title::after {
content: '';
height: 5px;
width: 5px;
right: -6px;
top: -5px;
position: absolute;
border: 1px solid #000;
border-top-left-radius: 100%;
border-right: none;
border-bottom: none;
}
.base>.row>.title::before {
content: '';
height: 5px;
width: 5px;
right: -6px;
bottom: -5px;
position: absolute;
border: 1px solid #000;
border-bottom-left-radius: 100%;
border-top: none;
border-right: none;
}
.base>.row>.title>.BR {
position: absolute;
right: 0;
top: 50%;
margin-top: -4px;
height: 0px;
width: 0px;
border-top: 4px solid transparent;
border-right: 5px solid black;
border-bottom: 4px solid transparent;
}
.base>.row>.title>.BR::after {
content: '';
position: absolute;
top: -7px;
left: 2px;
border-top: 7px solid transparent;
border-right: 12px solid #FFFFFF;
border-bottom: 7px solid transparent;
}
.base>.row>.list {
text-align: left;
padding-left: 10px;
}
.base>.row>.list .li {
height: 30px;
line-height: 30px;
}
.base>.row>.list .li>.name {
padding-right: 5px;
}
</style>
</head>
<body>
<div class="base">
<div class="row">
<div class="title">
联系人<span class="BR"></span>
</div>
<div class="list">
<div class="item">
<span>联系人</span>
</div>
<div class="item">
<span>联系人</span>
</div>
<div class="item">
<span>联系人</span>
</div>
<div class="item">
<span>联系人</span>
</div>
<div class="item">
<span>联系人</span>
</div>
<div class="item">
<span>联系人</span>
</div>
</div>
</div>
</div>
</body>
</html>
最后:喜欢的同学,记得点赞 关注哦!