<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{margin:0px;} .container{ display:flex; width:170px; } .image{ /*float:left;*/ height:100px; width:100px; margin-right:15px; } .news{ /*float:left;*/ flex-grow:1; /*flex-shrink:7;*/ /*width:170px;*/ height:100px; line-height:25px; font-family:"宋体"; overflow:hidden; } .title{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-weight:bold; font-size:16px; } .paragraph{font-size:14px; color:#666; } </style> </head> <body> <div class="container"> <img class="image" src="http://163.com/x.jpg "> <div class="news"> <div class="title">标题文字标题文字标题文字标题文字</div> <div class="paragraph">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</div> </div> </div> </body> </html>
付费偷看金额在0.1-10元之间
应该是flex的问题,也就是flex-grow + flex-shrink + flex-basis
flex-grow 默认为0,而flex-shrink默认为1,而flex-basis默认是auto;
就算不设置,.image的flex-shrink是默认为1的。
经过测试 .image{flex:none;}就可以了。
但是我也不知道为什么。不设置的话,就算父容器宽度可以容纳字体,也还是会变窄,
而且是刷新变窄,刷新变宽,我也很想知道是什么原因
一周热门 更多>