实现尾部的效果难点

关于底部样式的实现

这里有一个技术难点就是实现右侧图片和文字向图片对齐的效果
我这里用到了弹性布局和定位

<section class="box">
        <img src="/img/footer_v180123.png">
        <div class="buttom">
        <section class="tab">
            <ul>
                <li><a>&nbsp;关于我们&nbsp;|</a></li>
                <li><a>&nbsp;人才招聘&nbsp;|</a></li>
                <li><a>&nbsp;联系我们&nbsp;|</a></li>
                <li><a>&nbsp;友情链接&nbsp;|</a></li>
                <li><a>&nbsp;版权声明&nbsp;|</a></li>
                <li><a>&nbsp;服务中心&nbsp;</a></li>
            </ul>
        </section>
            <div class="buttom-buttom">
            <div class="licen">
             <div class="licen-img1"><img src="/img/culture.png" alt=""></div>
            <p>Copyright ◎ 2009-2016 yinyuetai.com 广播电视节目制作经营 许可证编号(京)字第1891号
                |京网文[2014]2037-287号|
                <span style="color: #36C893;">网络视听许可证0110413号</span></p >
                
             <p>京公网安备11010502014900号L京ICP备11024134号-11京ICP证060716号|出版物经营许可证 新出发京委字笔朝130062号|增值电信业务经营许可证B2-201405004853631</p >
             <div class="licen-img2"><img src="/img/biaoshi.gif" alt=""></div>
             </div>
            <p>食品经营许可证s证:JY111050404885363| 经营执照</p >
              </div>
            </div>
    </section>

这里是一些基本的布局，想实现文字靠图片对齐先用弹性布局

display: flex;

然后让文字可换行

 flex-direction: column;

然后让文字上下居中左右靠右边

justify-content:center;
 align-items: end;

然后把文字的padding-right调试一下留出一些空隙把图片添加进去
这里需要先给.licen一个相对定位

 position: relative;

最后再给图片一个绝对定位靠右显示即可实现效果

   position: absolute;
            top: -5px;
             right: 1%;