css相互弯曲左下方的一项和右下方的两项 [英] css flex one item on the left and 2 items on the right under each other
本文介绍了css相互弯曲左下方的一项和右下方的两项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有3个div容器,我希望第一个div容器位于左侧,高度与右侧的2个容器一样大,但是问题是右侧的容器没有包装在一个父容器中。基本上我想做的-
I have 3 div containers and I want first div container to be on left side and be as large in height as 2 containers on the right side, but the problem is that the containers on right side are not wrapped in one parent container. Basically what I want to do -
是否有可能在不更改html结构的情况下做到这一点?或唯一可行的解决方案是将这两个元素包装在一个父容器中?
Is it even possible to do it without changing html structure? Or only possible solution would be to wrap those 2 elements in one parent container?
这是我的html结构-
Here is my html structure -
<div class="container">
<div class="block1">text here</div>
<div class="block2">text here</div>
<div class="block3">text here</div>
</div>
谢谢您的帮助!
推荐答案
我是用 grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height:400px;
}
.container div {
color:#fff;
text-align:center;
}
.block1 {
grid-row: 1 / 5;
grid-column: 1 / 3;
background:red;
}
.block2 {
grid-row: 1 / 3;
grid-column: 3 / 3;
background:greenyellow;
}
.block3 {
grid-row: 3 / 5;
grid-column: 3 / 3;
background:dodgerblue;
}
<div class="container">
<div class="block1">text here 1</div>
<div class="block2">text here 2</div>
<div class="block3">text here3</div>
</div>
这篇关于css相互弯曲左下方的一项和右下方的两项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文