CSS实现自适应三栏布局
效果如下图
实现思路
问题：如果将最外层的父div设置为100%，那么三个子div为33.3333%即可实现横向的三栏布局，但是三个子div之间没有间距，不是很美观。但是我们加上间距会发现100%不能够分配给三个子div（三个div不能排列在一行）
🛑方法：在父div与子div之间在加上一层div，我们按照层次由外而内分别叫做div1，div2，div3。div1仍然为100%，div2则设置margin-right: -10px，div3则设置margin-right: 10px。由此，我们将div3的宽度设置为33.333333% - 10px即可以达到理想效果。
关键代码如下
.div1{ width: 100%; overflow: hidden; } .div2{ display: flex; flex-wrap: wrap; margin-right: -10px } .div3{ width: calc(33.33333% - 10px); margin-right: 10px; }
全部代码
<template> <div class="div1"> <div class="div2"> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> </div> </div> </template> <style lang="scss" scoped> .div1{ width: 100%; height: 500px; background-color: red; overflow: hidden; .div2{ display: flex; flex-wrap: wrap; margin-right: -10px; background-color: mediumpurple; .div3{ width: calc(33.33333% - 10px); height: 100px; margin-right: 10px; margin-top: 10px; background-color: greenyellow; } } } </style>
效果如下图
