打开垫子扩展面板正在移动对面的柱子,如何保持静止?
Posted
技术标签:
【中文标题】打开垫子扩展面板正在移动对面的柱子,如何保持静止?【英文标题】:Opening mat-expansion panel is moving the opposite column, how to keep it still? 【发布时间】:2021-02-10 03:30:23 【问题描述】:在我的项目中,我有两列,每列都有自己的垫子手风琴,其中包含一些垫子扩展面板。
当我点击打开任何一个扩展面板时,它正在向下移动相反的列。
这里是 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;
如果没有被点击,我希望对面的列保持原位。
有没有办法将对面的列保持在原位,以便只有单击了垫子扩展面板的列才会移动?如果没有这样的方法,有没有办法使用带有标题和内容的 mat-card 复制 mat-expansion 面板?我需要一切都保持静止。
【问题讨论】:
你能分享你的模板和样式表吗?我猜你的内容在容器增长时会与中心对齐。您可以定位绝对或对齐到顶部。 @AndresAbadia 我为你更新了问题,你能再看看吗? 【参考方案1】:就像我猜的一样。您的行内容与中心对齐。将align-items
更改为例如flex-start
以将行内容与行顶部对齐。
.row
...
align-items: flex-start;
【讨论】:
非常感谢!以上是关于打开垫子扩展面板正在移动对面的柱子,如何保持静止?的主要内容,如果未能解决你的问题,请参考以下文章
UIKit Dynamics 碰撞 - 保持 Barriers 元素静止