问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

下面代码，flex自适应布局，但是图片宽度变窄了而不是文字的宽度变窄，我测试过是文字影响了导致没法自适应，为什么，应该怎么改？

头像
lyn_57a36d3e28226
    611
    头像头饰
    fenbox
    6.8k217979

    图片描述

    <!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>
    css
    阅读 9.8k
    1 个回答
    得票最新
    头像
    thewindsword
      4986

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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏