css实现多列自适应布局的几种方式
要求,共4列,首列宽度固定为200px,其余3列均分剩余宽度,每列间距10px,分别是以下几种方式:
display: grid 实现
display: flex 实现
position: aboslute + float 实现
position: aboslute + float +非calc实现
代码:
<h2>display: grid 实现</h2> <div class="g-grid"> <div class="g-item">0</div> <div class="g-item">1</div> <div class="g-item">2</div> <div class="g-item">3</div> </div> <h2>display: flex 实现</h2> <div class="g-flex"> <div class="g-item">0</div> <div class="g-item">1</div> <div class="g-item">2</div> <div class="g-item">3</div> </div> <h2>position: aboslute + float 实现</h2> <div class="g-position"> <div class="g-item">0</div> <div class="g-item">1</div> <div class="g-item">2</div> <div class="g-item">3</div> </div> <h2>position: aboslute + float +非calc实现</h2> <div class="g-justify"> <div class="g-left">0</div> <div class="g-col"> <div class="g-row"> <div class="g-item-box"> <div class="g-item">1</div> </div> <div class="g-item-box"> <div class="g-item">2</div> </div> <div class="g-item-box"> <div class="g-item">3</div> </div> </div> </div> </div>
h2 { font-size: 28px; text-align: center; color: #fff; background: #009688; line-height: 2; } .g-left, .g-item { background: #3f51b5; line-height: 200px; color: #fff; text-align: center; font-size: 24px; } /* display: grid 实现 */ .g-grid { height: 200px; background: #ff9800; display: grid; grid-template-columns: 200px repeat(3, 1fr); grid-column-gap: 10px; margin-bottom: 20px; } /* display: flex 实现 */ .g-flex { height: 200px; background: #ff9800; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 20px; } .g-flex .g-item { flex: 0 1 calc((100% - 200px - 30px) / 3); } .g-flex .g-item:first-child { flex: 0 1 200px; } /* position: aboslute + float 实现 */ .g-position { position: relative; height: 200px; background: #ff9800; margin-bottom: 20px; } .g-position .g-item { float: left; width: calc((100% - 200px - 30px) / 3); margin-left: 10px; } .g-position .g-item:nth-child(2) { /* float: left; width: calc((100% - 200px - 30px) / 3); */ margin-left: 210px; } .g-position .g-item:first-child { position: absolute; top: 0; left: 0; width: 200px; height: 200px; float: unset; margin-left: unset; } /* position: aboslute + float +非calc实现 */ .g-justify { position: relative; height: 200px; background: #ff9800; margin-bottom: 20px; } .g-justify .g-col, .g-justify .g-row, .g-justify .g-item-box { box-sizing: border-box; } .g-justify .g-left { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .g-justify .g-row { margin-right: -5px; margin-left: -5px; } .g-justify .g-col { position: absolute; top: 0; left: 210px; right: 0; height: 200px; overflow: hidden; } .g-justify .g-col:before, .g-justify .g-col:after { display: table; content: " "; } .g-justify .g-col:after { clear: both; } .g-justify .g-col .g-item-box { position: relative; float: left; width: 33.33%; padding-left: 5px; padding-right: 5px; }
效果:
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/707
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!