css两行四列 |c 提取页面css

.container{
display: flex;
flex-wrap: wrap;
}
.item{
width: 25%;
box-sizing: border-box;
padding: 10px;
}

首先定义一个包裹四列的容器，使用display: flex属性让子元素灵活排列。将每个子元素的宽度设置为25%，这样就能够正好放下四列元素。另外box-sizing: border-box可以让padding不会撑大子元素。最后给子元素设置一些内边距，让页面更美观。

下面是一个使用这两行代码实现的例子：

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div>

在上面的HTML结构中，大家可以看到八个子元素平均分布在四列中，非常简洁易懂。这种简单而高效的排版方式在实际开发中也是非常常用的。