top: 0;
left: 0;
width: 100%;
height: 100%; /* 铺满⽗元素容器，这时候宽⾼就始终相等了 */
}
.square-inner>li{
width: calc(98%/ 3); /* calc⾥⾯的运算符两边要空格 */
height: calc(98%/ 3);
margin-right: 1%;
margin-bottom: 1%;
css布局左边固定右边自适应
overflow: hidden;
}
使⽤Flex的⼀个好处是不⽤再担⼼⾼度塌陷的问题，⽽且还可以轻松实现⼦元素横向竖向甚⾄按⽐例伸缩扩展的布局。.flex{
display: flex;
flex-wrap: wrap;
}
.flex>li{
flex-grow: 1; /* ⼦元素按1/n的⽐例进⾏拉伸 */
background-color: #4d839c;
text-align: center;
color: #fff;
font-size: 50px;
line-height: 2;
}
.flex>li:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
margin-right: 0;
}
.flex>li:nth-of-type(n+7){ /* 选择倒数的三个元素，n可以取0 */
margin-bottom: 0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。