一个高为117px的长方形的div盒子 分为高为20px三份小的div
时间: 2024-03-09 22:49:11 浏览: 23
好的,可以使用以下 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` 的分布。
相关问题
一个高为117px的长方形的div盒子 上中下 分为高为20px三份小的div
好的,可以使用以下 HTML 和 CSS 代码实现这个布局:
HTML代码:
```html
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
```
CSS代码:
```css
.container {
height: 117px;
border: 1px solid #000; /* 方便观察 */
position: relative;
}
.container div {
height: 20px;
position: absolute;
width: 100%;
top: 0;
}
.top {
background-color: red;
top: 0;
}
.middle {
background-color: green;
top: 20px;
}
.bottom {
background-color: blue;
bottom: 0;
}
```
其中,`container` 是包含三个小 `div` 的父元素,`top`、`middle`、`bottom` 表示三个小 `div`。通过设置 `position: absolute` 可以让三个小的 `div` 相对于 `container` 定位。`top`、`middle`、`bottom` 分别设置了不同的 `top` 和 `bottom` 值实现了上中下三个小 `div` 的分布。
一个高为117px的长方形的div盒子 上中下 分为高为20px三份小的div 他们的上边距为18px
好的,你的问题是如何实现这个布局吗?如果是这样,可以使用以下 CSS 代码实现:
```css
.parent {
height: 117px;
position: relative;
}
.child {
position: absolute;
height: 20px;
width: 100%;
top: 18px;
}
.top {
background-color: red;
}
.middle {
background-color: green;
top: 58px; /* 20px + 18px + 20px = 58px */
}
.bottom {
background-color: blue;
top: 98px; /* 20px + 18px + 20px + 18px = 98px */
}
```
其中,`parent` 是包含三个 `child` 的父元素,`child` 是三个小的 `div`,`top`、`middle`、`bottom` 分别表示三个小的 `div`。通过设置 `position: absolute` 可以让三个 `child` 相对于 `parent` 定位。`top`、`middle`、`bottom` 分别设置了不同的 `top` 值实现了上中下三个小 `div` 的分布。