ask2

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

2016-10-13 08:13发布

站内问答 /
3309 1 2 

<!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>
发送
1条回答
忙碌的小伟 - 这个人很懒，什么都没留下
1楼 · 2016-10-13 08:35.采纳回答

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

一周热门 更多>