[英]Opening mat-expansion panel is moving the opposite column, how to keep it still?
在我的项目中,我有两列,每列都有自己的垫子手风琴,里面有一些垫子扩展面板。
当我单击打开任何一个扩展面板时,它正在向下移动相反的列。
这是CSS。 基本上,“行”包含两列,其中包含手风琴。
.row {
padding-top: 120px;
padding-left: 25px;
padding-right: 25px;
flex-flow: row wrap;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
.column {
flex-direction: column;
box-sizing: border-box;
display: flex;
flex: 1 1 50%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
max-width: 50%;
}
.mat-expansion-panel {
background: rgba(0, 0, 0, 0.7);
width: px;
margin-bottom: 1.5rem;
}
.mat-expansion-panel-header {
height: 150px;
font-family: Gotham HTF;
font-size: 26px;
justify-content: space-between;
text-align: center;
}
如果没有被点击,我希望对面的列保持在原位。
有没有办法将对面的列保持在适当的位置,以便只有被点击的带有垫子扩展面板的列在移动? 如果没有这种方法,有没有办法使用带有标题和内容的垫卡复制垫扩展面板? 我需要一切才能保持静止。
就像我猜的那样。 您的行内容与中心对齐。 将align-items
更改为例如flex-start
以将行内容对齐到行的顶部。
.row {
...
align-items: flex-start;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.