1.实现div行内布局所有行跟随最大高度自适应
html代码样例:
1
class=
"
row-single
">
2
class=
"
colspan-title
">
3
所在部门
4
5
class=
"
colspan-right
">
6
18
class=
"
scale-20
">
7
@ViewBag.decideDetail.departName
8
9
class=
"
scale-20
">岗位
10
class=
"
scale-20
">
11
@ViewBag.decideDetail.positionName
12
13
class=
"
scale-20
">定(调)薪时间
14
class=
"
scale-down
">
15
@ViewBag.decideDetail.decidePayTime
16
17
"
font: 0px/0px sans-serif;clear: both;display: block
">
19
css样式代码:
1 //注意主要实现代码: 2 3 /*单行双列*/ 4 .row-single { 5 width: 100%; 6 line-height: 32px; 7 border-bottom: 1px solid #D0D6D9; 8 box-sizing: border-box; 9 flex-wrap: wrap; //主要代码 10 align-items: stretch; //主要代码 11 display: flex //主要代码 12 } 13 .scale-20 { 14 float: left; 15 width: 189px; 16 height: auto; 17 line-height: initial; 18 word-break: break-all; 19 } 20 .scale-down { 21 width: 160px; 22 float: left; 23 height:100%; 24 border-right:none !important; 25 }
效果展示:
2.打印效果的修改
页面布局之后使用
@media print{
//自定义的打印显示样式
}
作者:YanBigFeg —— 颜秉锋
出处:http://www.cnblogs.com/yanbigfeg
本文版权归作者和博客园共有,欢迎转载,转载请标明出处。如果您觉得本篇博文对您有所收获,觉得小弟还算用心,请点击右下角的 [推荐],谢谢!