如果一个人的身高发生变化，如何更改所有 div 的高度答案

【问题标题】：How to change all div heights if one's height changes如果一个人的身高发生变化，如何更改所有 div 的高度
【发布时间】：2023-03-04 15:10:02
【问题描述】：

当用户按下显示更多组件的高度从上方增加时，我有多个组件具有显示更多按钮。我希望它的高度从底部增加。

我想到的想法是当有人按 Show More 时更改所有组件的高度，但这仍然行不通，因为 Show more 上显示的详细信息因组件而异。

    border-radius: 5px;
    border: 1px solid #e6e6e6;
    text-align: center;
    width: 20%;
    background: #fff7f7;
    transition: all .2s;
    position: relative;
    display: inline-block;
    margin: 0 2rem;

    &ShowMore {
        background: none;
        outline: none;
        border: none;
        text-decoration: underline;
        cursor: pointer;
        margin-top: 1.5rem;
    }


    &Details {
        padding: 2rem;
    }


}

这是我的 React 组件

 <div className={classes.Tour}>
            <span className={classes.TourClose} onClick={props.close}>X</span>
            <img className={classes.TourImg} 
                src={props.photo} 
                alt={props.name + `'s Photo`}/>
            <div className={classes.TourDetails}>
            <h2>{props.name}</h2>
            <h2>{props.city}</h2>
            <button className={classes.TourShowMore} onClick={props.show}>Show More..</button>
            <p>{props.children}</p>
            </div>
        </div>

这是正常的样子

这是当有人点击“显示更多”时的样子

【问题讨论】：

在这种情况下，您的卡片视图有一个固定的高度，当您按下显示更多时，使用垂直滚动来阅读内容，那么您不需要调整兄弟卡片的高度。

标签： css reactjs height

【解决方案1】：

您可以在 flexbox 的帮助下做到这一点。制作元素的容器display: flex 并添加属性align-items: flex-start，您可以确保它们始终在顶部对齐。然后你可以使用max-height 或类似的东西来显示/隐藏额外的内容。

这是一个简单的例子：https://codepen.io/giumagnani/pen/ROPWZV

【讨论】：