图片与文本对齐

最新推荐文章于 2022-01-06 11:23:50 发布

天水一欢

最新推荐文章于 2022-01-06 11:23:50 发布

阅读量417

点赞数 2

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/qq_40263927/article/details/89007368

版权

web前端专栏收录该内容

12 篇文章

订阅专栏

发现有些同学还不知道如何对齐图片与文本，这里不废话。直接贴出源代码。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <style>
           img{
           height: 300px;
           vertical-align: top;
           }
           .maninfo{
               height: 300px;
               display: inline-block;
               background: red;
           }

           .maninfo > div{
               height: 60px;
               width: 250px;
               line-height: 60px;
               overflow: hidden;
               text-overflow:ellipsis;
               white-space: nowrap;
           }

       </style>
   </head>
   <body>
       　<div>

           <img src="image/img_nopicture.png">

           <div class="maninfo">
               <div><span>姓名:</span><span>赵敏</span></div>
               <div><span>性别:</span><span>女</span></div>
               <div><span>身份证:</span><span>350182198811121512</span></div>
               <div><span>业务类型:</span><span>销售</span></div>
               <div><span>单位:</span><span>福建福州再创兴龙腾科技有限公司</span></div>
           </div>

       </div>

   </body>
</html>