<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>flex布局实现</title>     <style type="text/css">         body {             margin: 0;             }                 .container {                 display: flex;             flex-wrap: nowrap;                 align-items: center;                 justify-content: flex-start;         }         .left-text {             text-align: left;             text-overflow: ellipsis;             overflow: hidden;             white-space: nowrap;        }       .icon-container {                align-self: flex-end;                }    </style> </head> <body> <div class="container">        <div class="left-text">这是左边的文字</div>        <div class="icon-container">                 <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>             <span>文字代替icon,宽度不固定</span>        </div> </div> </body> </html>
点赞 3

相关推荐

05-03 12:45
西南大学 Java
nsnzkv:你这项目写的内容太多了,说实话都是在给自己挖坑,就算简历过了,后面面试也难受
点赞 评论 收藏
分享
点赞 评论 收藏
分享
牛客网
牛客网在线编程
牛客网题解
牛客企业服务