一个高200px的大div盒子里 有上下两个小盒子 上面盒子高82px 下面盒子高117px 该怎么写
时间: 2024-03-09 16:44:51 浏览: 21
可以使用以下 CSS 代码实现:
```css
/* 设置大盒子高度 */
.div-box {
height: 200px;
}
/* 设置上面小盒子高度 */
.top-box {
height: 82px;
}
/* 设置下面小盒子高度 */
.bottom-box {
height: 117px;
}
```
HTML结构可以是这样的:
```html
<div class="div-box">
<div class="top-box"></div>
<div class="bottom-box"></div>
</div>
```
这样就可以实现一个高200px的大div盒子里有上下两个小盒子,上面盒子高82px,下面盒子高117px。
相关问题
一个高为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` 的分布。
设置一个div盒子,设置盒子的宽和高分别是223px、333px
好的,以下是您需要的代码:
```html
<div style="width: 223px; height: 333px;"></div>
```
在这个代码中,我们直接在`<div>`标签内使用`style`属性来设置样式,指定了`width`为223px,`height`为333px。您可以将这段代码嵌入到您的HTML文件中,或者将其放到CSS文件中进行管理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)