一个高为117px的长方形的div盒子 上中下 分为三份小的div 他们的上边距为18px
时间: 2024-03-09 21:48:30 浏览: 18
好的,你可以使用绝对定位来实现这个效果。具体来说,你可以将长方形的div盒子设置为相对定位,并将三个小的div都设置为绝对定位。然后,将它们的上边距设置为18px,并使用top属性将它们分别定位在长方形盒子的上、中、下位置。下面是一个示例代码:
```html
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
```
```css
.container {
position: relative; /* 设置长方形盒子为相对定位 */
height: 117px; /* 设置盒子高度 */
}
.top, .middle, .bottom {
position: absolute; /* 设置三个小的div为绝对定位 */
left: 0; /* 将它们定位到盒子的左侧 */
right: 0; /* 将它们定位到盒子的右侧 */
height: calc((117px - 2 * 18px) / 3); /* 计算每个小的div的高度 */
margin-top: 18px; /* 设置每个小的div的上边距为18px */
}
.top {
top: 0; /* 将第一个小的div定位到盒子的顶部 */
background-color: red;
}
.middle {
top: calc((117px - 2 * 18px) / 3 + 18px); /* 将第二个小的div定位到盒子的中间位置 */
background-color: green;
}
.bottom {
bottom: 0; /* 将第三个小的div定位到盒子的底部 */
background-color: blue;
}
```
这样,你就可以将长方形的div盒子分为上中下三个部分,并且它们的高度相等,并且它们的上边距都为18px。