html经典布局(适用于移动端)

最新推荐文章于 2023-08-31 08:49:03 发布

UIEngineer

最新推荐文章于 2023-08-31 08:49:03 发布

阅读量3k

点赞数

分类专栏： webApp

webApp 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

主要采用流式布局flex布局实现。
在很多时候，移动端页面一个层常分列，但浏览器屏幕差别，用浮动，或者定位写老是出现一堆或大或小的差错，此时用流式布局就可避免这些错误。

代码：

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

    </head>
    <style type="text/css">
        .box{
            width: 300px;
            padding: 10px;
            margin: 20px auto;
            border: 1px soid #000 !important;
            display: table;
            background: #ccc;

            display: flex;
        }

        .box .text{
            display: table-cell;
            font-size: 10px;
            vertical-align: middle;

            /*
                flex属性是以下三个属性的简写
                flex-grow:定义弹性盒子项的拉伸因子，即子项分配父项剩余空间的比，默认值为0
                flex-shrink:1;指定了flex元素的收缩规则，子项的收缩所占的份数，默认值为1
                [当所有子项相加的宽度大于父项宽度，每个子项减少的多出的父项宽度的1/n]
                flex-basis:auto;指定了flex元素在主轴方向上的初始大小，即子项的宽度
            */
            flex: 0 0 80px;
        }

        .box .text .icon,.box .right .icon{
            display: inline-block;
            width: 15px;
            height: 15px;
            line-height: 15px;
            color: red;
            font-size: 10px;
            background: #00BFFF;
            vertical-align: top;
        }

        .box .right{
            flex:1;
            /* width:0解决超过省略问题 */
            width: 0;
            background: greenyellow;
            margin-left: 10px;
            white-space: nowrap;/* 强制文本在一行内显示 */
            overflow: hidden;/* 溢出内容为隐藏 */
            text-overflow: ellipsis;/* 当对象文本溢出时显示省略标记(...) */
        }
    </style>

    <body>

          <div class="warp">
              <div class="box">
                <span class="text">
                    <span class="icon">icon</span>
                    左侧——>宽度为80px固定不变
                </span>
                 <span class="right">
                    <span class="icon">icon</span>
                    右侧——>距离左边10px，为除左侧以及边距的剩余长度
                </span>
              </div>
              <div class="box">
                <span class="text">
                    <span class="icon">icon</span>
                    左侧——>宽度为80px固定不变
                </span>
                <span class="right">
                    <span class="icon">icon</span>
                    右侧——>距离左边10px，为除左侧以及边距的剩余长度
                </span>
              </div>
          </div>  

    </body>

效果图：
这里写图片描述

转载自前端网

UIEngineer

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html经典布局(适用于移动端)

主要采用流式布局flex布局实现。在很多时候，移动端页面一个层常分列，但浏览器屏幕差别，用浮动，或者定位写老是出现一堆或大或小的差错，此时用流式布局就可避免这些错误。代码： <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/cs
复制链接

扫一扫

专栏目录