我的卡片布局有问题。 我需要左侧的卡片始终为全高,直到底部卡片宽度到达左侧的卡片。那么左边卡片的高度应该相应减小。
如果可能的话,我想用CSS来做所有事情。 尝试使用 flex 和 grid,但没有成功。谢谢。
based on the images supported here are both based of this html structure:
<div class="layout">
<div class="card1"> card 1</div>
<div class="card2"> card 2</div>
</div>
The styles for each image
for example 1 :
html,body { height: 100%; margin: 0px; padding: 0px; }
.layout{
display:flex;
align-items:end;
background-color: lightblue;
height:100%;
width:100%;
gap:5px;
}
.card1{
width:20%;
height:100%;
text-align:center;
border:2px solid black;
background-color:white
}
.card2{
flex:1;
height:20%;
text-align:center;
border:2px solid black;
background-color:white
}
for example 2:
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
.layout {
display: flex;
flex-direction: column;
background-color: lightblue;
height: 100%;
width: 100%;
gap: 5px;
}
.card1 {
width: 15%;
height: 100%;
text-align: center;
border: 2px solid black;
background-color: white;
}
.card2 {
width: 100%;
height: 25%;
text-align: center;
border: 2px solid black;
background-color: white;
}