您的位置：首页 > 移动开发

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

2017-10-08 14:10 363 查看
主要采用流式布局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>


效果图：



转载自前端网
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航