css设置三个div宽度占据三分之一

fengqing55782024-08-27 9:50

在CSS中，如果你想让一个元素占据其父容器宽度的三分之一，你可以通过设置该元素的width属性为33.333%（或更常见的，简化为33.33%或33%，因为百分比在CSS中通常不需要极高的精度）来实现。这里是一个简单的例子：

html 复制代码

<!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;，我们确保了元素的边框和内边距（在这个例子中设置了内边距）被包含在元素的总宽度内，而不是增加元素的宽度。

这种方法是响应式的，意味着无论父容器的宽度如何变化，子元素都会保持其宽度为父容器的三分之一