css 列3分之1

CSS中的列3分之1属性是指将一个元素或一组元素分成三个相等宽度的列。这个属性在实现响应式设计时非常有用，可以使得页面在不同尺寸的屏幕上都能够自适应。

.col-3 {
  width: calc(100% / 3);
  float: left;
}

上面是一个简单的CSS代码示例，用来实现三个等宽度的列。我们将一个元素的宽度设置为总宽度的1/3，然后使用浮动（float）让这三个元素并排排列起来。

当然，这只是一个简单的示例。在实际的开发中，我们可能需要考虑更多的因素，比如元素间的间隙、边框样式等等。因此，我们可以对上面的代码进行修改，来满足具体的需求。

.col-3 {
  Box-sizing: border-Box;
  width: calc(100% / 3 - 20px);
  margin-right: 20px;
  float: left;
  border: 1px solid #ccc;
  padding: 10px;
}
.col-3:last-child {
  margin-right: 0;
}

上面的代码中，我们使用了Box-sizing属性来指定行内元素的盒子模型，将元素的边框和内边距计算在元素的总宽度内。然后我们设置了元素的宽度为总宽度的1/3，减去20像素用来作为元素之间的间隙。同时，我们给元素设置了带有1像素宽度的边框和10像素宽度的内边距，用来为元素添加样式。最后，我们使用:last-child选择器来去除最后一个元素的右侧边距。

总的来说，CSS中的列3分之1属性可以为响应式设计提供一个强大的工具。我们可以使用这个属性来实现页面布局的自适应，同时也可以添加更多的样式来使得页面更美观。