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

Question

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

我想到的想法是当有人按下Show More但仍然无法工作时更改所有组件的高度，因为Show more上显示的Details会因组件而异。

    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>

这就是它看起来正常的样子

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

Answer 1

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

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