css在一个大盒子中把盒子分成上下2/3的两部分
时间: 2023-05-12 07:03:37 浏览: 80
可以使用CSS的height属性来实现这个效果,将大盒子的高度设置为100%,然后将上部分的高度设置为66.67%,下部分的高度设置为33.33%。具体代码如下:
```
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
.container {
height: 100%;
}
.top {
height: 66.67%;
}
.bottom {
height: 33.33%;
}
```
当然,这只是一种实现方式,还有其他的方法可以达到同样的效果。
相关问题
css在一个大盒子中把盒子分为上下2/3的两部分
可以使用flex布局,将大盒子设置为display:flex,然后设置flex-direction为column,这样子元素就会按照垂直方向排列。接着,可以设置上下两个子元素的flex属性,将上面的元素的flex属性设置为2,下面的元素的flex属性设置为1,这样子上下两个元素的高度比例就是2:1了。具体代码如下:
HTML代码:
```
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-direction: column;
height: 500px; /* 设置大盒子的高度 */
}
.top {
flex: 2; /* 设置上面的元素的flex属性为2 */
background-color: #ccc;
}
.bottom {
flex: 1; /* 设置下面的元素的flex属性为1 */
background-color: #eee;
}
```
css在一个大盒子中把盒子分成上下2:3的两个盒子
可以使用flex布局来实现这个效果,设置大盒子为display:flex,然后设置flex-direction:column,这样子元素会垂直排列。接着设置大盒子的高度为100vh,这样子就可以占满整个屏幕。然后设置上面的盒子的flex属性为2,下面的盒子的flex属性为3,这样子就可以实现上下2:3的分割效果。具体代码如下:
HTML代码:
```
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.box1 {
flex: 2;
}
.box2 {
flex: 3;
}
```