ask2

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

2016-10-13 11:43发布

站内问答 /
3396 2 4 

<!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条回答
恰逢花开 - 这个人很懒，什么都没留下
2016-10-13 11:38

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

一周热门 更多>