css 实现文字自动换行切同行元素高度自适应-阿里云开发者社区

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

2018-04-03 1537

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1.实现div行内布局所有行跟随最大高度自适应 html代码样例： 1 2 3 所在部门 4 5 6 7 @ViewBag.decideDetail.departName 8 9 岗位 10 11 @ViewBag.

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 }