一个大的div套三个小div,如何让三个小div平均分配?
时间: 2024-03-09 07:48:23 浏览: 69
可以使用CSS中的Flexbox布局来实现这个效果。具体实现如下:
HTML代码:
```html
<div class="big-div">
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
</div>
```
CSS代码:
```css
.big-div {
display: flex;
justify-content: space-between;
}
.small-div {
flex-basis: 30%;
}
```
上述代码中,我们将大的div设置为Flex容器,并使用`justify-content: space-between`来让三个小的div平均分配。同时,我们使用`flex-basis: 30%`来让每个小的div占据父容器的30%宽度。这样,三个小的div就能够平均分配了。
相关问题
一个长方形的div盒子 上中下 平均分为三分
好的,这是一个CSS布局问题。你可以使用flexbox或者grid布局来实现这个效果。具体来说,你可以将长方形的div盒子设置为一个flex容器,并使用flex-direction属性将其设置为垂直方向。然后,将盒子分为上中下三个部分,可以使用flex-grow属性使它们平均分配容器的剩余空间。下面是一个示例代码:
```html
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
```
```css
.container {
display: flex;
flex-direction: column;
height: 300px; /* 设置盒子高度 */
}
.top, .middle, .bottom {
flex-grow: 1; /* 平均分配容器的剩余空间 */
}
.top {
background-color: red;
}
.middle {
background-color: green;
}
.bottom {
background-color: blue;
}
```
这样,你就可以将长方形的div盒子分为上中下三个部分,并且它们的高度相等。
一个高为117px的长方形的div盒子 分为高为20px三份小的div
好的,可以使用以下 HTML 和 CSS 代码实现这个布局:
HTML代码:
```html
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
```
CSS代码:
```css
.container {
height: 117px;
border: 1px solid #000; /* 方便观察 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.child {
height: 20px;
background-color: gray;
}
```
其中,`container` 是包含三个小 `div` 的父元素,`child` 表示三个小 `div`。通过设置 `display: flex` 和 `flex-direction: column` 可以让三个小的 `div` 沿垂直方向排列。通过设置 `justify-content: space-between` 可以让三个小的 `div` 之间的距离平均分配,实现了上中下三个小 `div` 的分布。