css设置三个div宽度占据三分之一
在CSS中，如果你想让一个元素占据其父容器宽度的三分之一，你可以通过设置该元素的width属性为33.333%（或更常见的，简化为33.33%或33%，因为百分比在CSS中通常不需要极高的精度）来实现。这里是一个简单的例子：
<!DOCTYPE html>
<html>
<head> <style> .container { width: 100%; /* 父容器宽度设置为100%，以便其子元素可以基于它计算宽度 */ display: flex; /* 使用Flexbox布局，让子元素能够并排显示 */ } .one-third { width: 33.33%; /* 子元素宽度设置为父容器的三分之一 */ /* 你可以在这里添加更多的样式，比如背景色、内边距等 */ background-color: lightblue; /* 示例背景色 */ padding: 10px; /* 示例内边距 */ box-sizing: border-box; /* 很重要，它确保了padding和border不会增加元素的最终宽度 */ } </style>
</head>
<body> <div class="container"> <div class="one-third">三分之一</div> <div class="one-third">三分之一</div> <div class="one-third">三分之一</div>
</div> </body>
</html>在这个例子中，.container 是一个父容器，其宽度设置为100%，意味着它会占据整个视口的宽度（或者它父元素的宽度，如果它被嵌套在另一个元素内）。.container 使用了Flexbox布局（display: flex;），这使得它的子元素（即具有.one-third类的元素）能够并排显示。
每个.one-third元素都被设置为其父容器宽度的三分之一（width: 33.33%;）。通过添加box-sizing: border-box;，我们确保了元素的边框和内边距（在这个例子中设置了内边距）被包含在元素的总宽度内，而不是增加元素的宽度。
这种方法是响应式的，意味着无论父容器的宽度如何变化，子元素都会保持其宽度为父容器的三分之一