css 实现文字自动换行切同行元素高度自适应

时间:2022-01-22 08:49:06

1.实现div行内布局所有行跟随最大高度自适应

html代码样例:

 <div class="row-single">
<div class="colspan-title">
所在部门
</div>
<div class="colspan-right">
<div class="scale-20">
@ViewBag.decideDetail.departName
</div>
<div class="scale-20">岗位</div>
<div class="scale-20">
@ViewBag.decideDetail.positionName
</div>
<div class="scale-20">定(调)薪时间</div>
<div class="scale-down">
@ViewBag.decideDetail.decidePayTime
</div>
</div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

css样式代码:

 //注意主要实现代码:

 /*单行双列*/
.row-single {
width: %;
line-height: 32px;
border-bottom: 1px solid #D0D6D9;
box-sizing: border-box;
flex-wrap: wrap; //主要代码
align-items: stretch; //主要代码
display: flex //主要代码
}
.scale- {
float: left;
width: 189px;
height: auto;
line-height: initial;
word-break: break-all;
}
.scale-down {
width: 160px;
float: left;
height:%;
border-right:none !important;
}

效果展示:

css 实现文字自动换行切同行元素高度自适应

css 实现文字自动换行切同行元素高度自适应

2.打印效果的修改

页面布局之后使用
@media print{
//自定义的打印显示样式