发表于： 2019-12-27 21:13:50
2 1080
Task 5
重点问题：
1.头像旁的文字定位问题
解决方法：参考其他网站，使用无序列表进行定位，可解决文字换行问题
<div class="persInfo">
<ul>
<li class="name">徐士林</li>
<li class="age">55岁</li>
</ul>
<ul>
<li><img src="Shape 4.png"></li>
<li class="addr">京城 · 四方 · 报纸林</li>
</ul>
</div>
2.五角星与文字位置问题
解决方法：刚开始将before设置在了span中，导致五角星占用了文字的位置，后续将before设置在li列表项，就不占用文字位置了
<ul>
<li class="star"><span>住家</span></li>
<li class="star"><span>不含餐</span></li>
</ul>
}
.star::before {
content: url(star.png);
position: absolute;
z-index: 10;
padding-top: 1px;
height: 15px;
}
3.自我介绍的文本框自适应
解决方法：刚开始使用绝对定位及精确像素用来使文字居中
<div class="item">
<div class="left1"><span class="gray"> 自我介绍</span></div>
<div class="right1">可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人。</div>
</div>
.left1{
position: absolute;
margin: 3px 12px;
padding-right: 12px;
width: 71px;
color: #999999;
line-height: 21px;
border-right: 1px solid #999999;
}
到后面发现无法自适应文本框高度，又全部改成了flex布局，自适应还是flex布局好用，不需要设置百分比，尤其是不知道确切百分比的情况下.
.left1 {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-basis: 69.5px;
margin: 3px 12px;
padding-right: 12px;
width: 71px;
white-space:nowrap;
line-height: 21px;
color: #999999;
}
.gray::after {
content: url(sep1.png);
position: absolute;
left: 69px;
}
.right1 {
flex-basis: auto;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 12px;
}
返回列表
评论