1.實現div行內布局所有行跟隨最大高度自適應
html代碼樣例：
1 <div class="row-single"> 2 <div class="colspan-title"> 3 所在部門 4 </div> 5 <div class="colspan-right"> 6 <div class="scale-20"> 7 @ViewBag.decideDetail.departName 8 </div> 9 <div class="scale-20">崗位</div> 10 <div class="scale-20"> 11 @ViewBag.decideDetail.positionName 12 </div> 13 <div class="scale-20">定（調）薪時間</div> 14 <div class="scale-down"> 15 @ViewBag.decideDetail.decidePayTime 16 </div> 17 </div> 18 <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 19 </div>
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｛
//自定義的打印顯示樣式
｝