下面代码,flex自适应布局,但是图片宽度变窄了而不是文字的宽度变窄,我测试过是文字影响了导致没法自 财富值29

2016-10-13 11:43发布

<!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>
友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
2条回答

方法:imgsrc填上有效的图片地址或者.image的样式加上flex-shrink:0.
img的src填上有效地址:你的图片地址失效将会显示alt属性的值,然后根据flex属性,因为.news不够位置显示,会优先压缩剩余空间.希望不被压缩就添加flex-shrink:0样式
添加flex-shrink:0:我的博客

应该是flex的问题,也就是flex-grow + flex-shrink + flex-basis
flex-grow 默认为0,而flex-shrink默认为1,而flex-basis默认是auto;
就算不设置,.image的flex-shrink是默认为1的。
经过测试 .image{flex:none;}就可以了。
但是我也不知道为什么。不设置的话,就算父容器宽度可以容纳字体,也还是会变窄,
而且是刷新变窄,刷新变宽,我也很想知道是什么原因

一周热门 更多>