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> </div> 
19 </div>

css樣式代碼：

 1 //注意主要實現代碼：
 2 
 3 /*單行雙列*/
 4 .row-single {
 5  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  189px;
16 height: auto;
17 line-height: initial;
18 word-break: break-all;
19 }
20 .scale-down {
21  160px;
22 float: left;
23 height:100%;
24 border-right:none !important;
25 }

效果展示：

2.打印效果的修改

頁面布局之后使用
@media print｛
//自定義的打印顯示樣式
｝

總結

以上是生活随笔為你收集整理的css 实现文字自动换行切同行元素高度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。