如果一个人的身高发生变化，如何更改所有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