1.問(wèn)題：
在左右布局中間定位一張圖片后，屏幕分辨率改變后，位置錯(cuò)亂，如圖：
image.png
首先，大致描述一下代碼：
/*我的資源，數(shù)據(jù)總量*/
export const Total = (props) => {
return (
<div className={ style.total }>
<Row>
<Col span={4}>
<div className={ style.total_left }>
<div></div>
<div></div>
</div>
</Col>
<Col span={20}>
<div className={ style.total_right }>
<div>
<p>
<span>2351</span>
<span>萬(wàn)</span>
</p>
</div>
<div className={ style.bg_color }>數(shù)據(jù)總量</div>
</div>
</Col>
</Row>
</div>
)
}
之前的css是這樣寫的：
/*我的資源，數(shù)據(jù)總量*/
.total{
border: 2px solid @second-color;
margin-top: 55px;
height: 130px;
.total_left{
border-right: 2px solid @second-color;
/* width: 32px; */
div:nth-child(1){
border-bottom: 2px solid @second-color;
height: 64px;
}
div:nth-child(2){
height: 64px;
}
}
.img{
position: relative;
top: -84px;
left: 12px;
}
.total_right{
text-align: right;
p{
height: 96px;
line-height:96px;
padding-right: 5px;
.font-over-hide;
span:nth-child(1){
font-size: 36px;
}
span:nth-child(2){
font-size: 20px;
}
}
.bg_color{
height: 30px;
line-height: 30px;
background-color: @second-color;
color: #000;
font-size: 18px;
padding-right: 5px;
}
}
}
后來(lái)的css是這樣寫的：
.total{
border: 2px solid @second-color;
margin-top: 55px;
height: 130px;
position: relative;//父元素相對(duì)定位
.total_left{
border-right: 2px solid @second-color;
/* width: 32px; */
div:nth-child(1){
border-bottom: 2px solid @second-color;
height: 64px;
}
div:nth-child(2){
height: 64px;
}
}
.img{
/*注意：定位圖片要用絕對(duì)定位，top和left要用百分比取值，最后一定要限制圖片寬度為100%*/
position: absolute;//定位圖片定位
top: 40%;
left: 43%;
width : 100%;
}
.total_right{
text-align: right;
p{
height: 96px;
line-height:96px;
padding-right: 5px;
.font-over-hide;
span:nth-child(1){
font-size: 36px;
}
span:nth-child(2){
font-size: 20px;
}
}
.bg_color{
height: 30px;
line-height: 30px;
background-color: @second-color;
color: #000;
font-size: 18px;
padding-right: 5px;
}
}
}
修改后的效果是這樣的：
image.png
