css: html:
| /*headline*/ #headline{ display: flex; margin-top: 0.278rem; margin-bottom: 0.278rem; margin-left: 0.417rem; margin-right: 0.417rem; width: calc(100% - 0.834rem); height: 1.222rem; line-height: 1.222rem; } #hotimg{ width: 2.639rem; height: inherit; border-right-width: 0.278rem; background: url(../images/index/icon_home_news.png) no-repeat; } #hottext{ font-size: 0.361rem; color: #333333; width: calc(100% - 3.806rem); flex:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hottip{ width: 0.333rem; background: url(../images/index/news_arrows.png) no-repeat; background-position-y: center; } |
<div id="headline"> <div id="hotimg"></div> <div id="hottext">习近平向武警部队授旗并致训词，中国武警支队</div> <div id="hottip"></div> </div> |
注意细节：
在设置背景图片所在子div的背景，相对于父div 垂直居中时，需要定义子div宽度为固定宽度，高度和父div一致，然后填充背景图，之后才能设置背景图的显示位置（background-position）。如果background-position和背景图（background：url（......)）顺序写颠倒了，实现不了你想要的效果哦