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;
}

效果展示:

2.打印效果的修改

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

css 实现文字自动换行切同行元素高度自适应的更多相关文章

  1. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  2. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

  3. 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结

    页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...

  4. CSS float 父元素高度自适应

    <html> <head><title></title><style type="text/css">*{margin: ...

  5. css控制文字自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换 行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  6. html/css实现文字自动换行,超出部分出现(...)

    PS:这是我在别人博客copy下来的 做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时 ...

  7. 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  8. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  9. 伪元素选择器,选择器优先级,CSS修改文字属性,CSS修改字体属性,CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

随机推荐

  1. 手把手带你画一个动态错误提示 Android自定义view

    嗯..再差1篇就可以获得持之以恒徽章了,今天带大家画一个比较简单的view. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/504771 ...

  2. PCMM(人力资源能力成熟度模型)V2.0中英对照版发布

    PCMM中英版终于发布 时光荏苒,从当初的回眸到如今的回头,这才发现:坚守一份承诺是多么的不易! 一年多了,这份承载殷切期待的作品--<PCMM(人力资源能力成熟度模型)V2.0 (中英文对照版 ...

  3. OM模块功能&API详解

    (一)销售订单概述 1.1   与车间模块关系 当使用ATO类型订单时,订单管理模块会直接在车间模块中产生任务 1.2   与库存模块关系 在销售订单中使用的物料,单位等信息均来自库存模块,在订单执行 ...

  4. Linux常用命令(第二版) --压缩解压缩命令

    压缩解压缩命令: ----------.gz---------- 1.压缩 gzip[GNU zip]: /bin/gzip 格式: gzip 选项 [文件] #压缩文件,压缩后扩展名为.gz,Lin ...

  5. HashMap二三事

    先看看hashmap在整个Collection中的位置 HashMap中存储数据的结构是 /** * The table, resized as necessary. Length MUST Alwa ...

  6. Linux - Bash shell的功能;内建命令type

    命令编修能力 (history): bash 的功能里头,相当棒的一个就是『他能记忆使用过的命令!』 这功能真的相当的棒!因为我只要在命令列按『上下键』就可以找到前/后一个输入的命令!而在很多 dis ...

  7. BT币(金融有风险,投资需谨慎)哥的失败投资

    谁都知道bt币是一个旁氏骗局, 而进去的人,就必须保证自己不赔钱,所以只能随着大潮往前走,谁也不能让它跌 压垮骆驼的最后一根稻草, 还是幕后有个 推手, 在炒作 BT币, 事实上,作为新的投资项目,B ...

  8. C#解析HTML利器-Html Agility Pack

    今天刚开始做毕设....好吧,的确有点晚.我的毕设设计需要爬取豆瓣的电影推荐,于是就需要解析爬取下来的html,之前用Python玩过解析,但目前我使用的是C#,我觉得C#不比python差,有微软大 ...

  9. 十分钟搞定mongodb副本集

    mongodb副本集配置 最近项目中用到了mongodb,由于是用mongodb来记录一些程序的日志信息和日常的统计,为了增加应用的可靠性,一直在找mongodb集群的一些资料,下面是对最近做的一个小 ...

  10. word break II(单词切分)

    Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, add space ...