下面代碼，flex自適應(yīng)布局，但是圖片寬度變窄了而不是文字的寬度變窄，我測試過是文字影響了導(dǎo)致沒法自？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>body{margin:0px;}.cont<愛尬聊_百科網(wǎng)>ainer{ 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="/upload/qa/20221223/20221223142084.jpg "> <div class="news"> <div class="title">標(biāo)題文字標(biāo)題文字標(biāo)題文字標(biāo)題文字</div> <div class="paragraph">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</div> </div> </div> </body> </html>
秋意濃走過傷悲只是朦朧惜醉顏 23小時前
方法:img的src填上有效的圖片地址或者.image的樣式加上flex-shrink:0.img的src填上有效地址:你的圖片地址失效將會顯示alt屬性的值,然后根據(jù)flex屬性,因為.news不夠位置顯示,會優(yōu)先壓縮剩余空間.希望不被壓縮就添加flex-shrink:0樣式添加flex-shrink:0:我的博客
200839xy 23小時前
應(yīng)該是flex的問題，也就是flex-grow + flex-shrink + flex-basisflex-grow 默認(rèn)為0，而flex-shrink默認(rèn)為1，而flex-basis默認(rèn)是auto；就算不設(shè)置，.image的flex-shrink是默認(rèn)為1的。經(jīng)過測試 .image{flex：none；}就可以了。但是我也不知道為什么。不設(shè)置的話，就算父容器寬度可以容納字體，也還是會變窄，而且是刷新變窄，刷新變寬，我也很想知道是什么原因
