日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

css自適應(yīng)布局方法 高度自適應(yīng)css( 二 )

云知道


= 100% / 3 – 28px
// scss
$width: 6px;
// 父元素
.parent {
display:flex;
flex-wrap:wrap;
margin-left: (30px – $width);
margin-right: 30px;
width: calc(100% + $width);
}
// 大致的想法
.child {
flex: 1;
margin: 10px $width;
width: calc(100% / 3 – 30px * 2 / 3 – 2px * 3 / 3 – $width * 3 / 3)
// width: calc(100% / 3 – 28px);
}
總結(jié)看似一個(gè)很容易很常見(jiàn)標(biāo)簽寬度自適應(yīng)的布局樣式問(wèn)題，卻引發(fā)了坑，各種思考，當(dāng)然方案遠(yuǎn)不止這一種 。我們可以通過(guò)實(shí)踐經(jīng)驗(yàn)總結(jié)出以下幾點(diǎn)：

  • 寬度自適應(yīng)問(wèn)題可以通過(guò)動(dòng)態(tài)計(jì)算（當(dāng)前主流瀏覽器基本都支持）
  • 子節(jié)點(diǎn)的寬度問(wèn)題可以去思考父元素是不是能夠做一些改變實(shí)現(xiàn)
  • 多思考，大膽實(shí)踐，方法總比困難多，這樣你才會(huì)摸索出更多的方法 。
web前端開(kāi)發(fā)崗位，一定要能夠腦洞靈活，各種角度各種方法思考 。我們才能游刃有余 。謝謝大家 。
我是路程lucky，6年web前端開(kāi)發(fā)經(jīng)驗(yàn)，目前參與的項(xiàng)目技術(shù)棧主要是React，歡迎關(guān)注~
【css自適應(yīng)布局方法 高度自適應(yīng)css】

推薦閱讀