'Read more' 影响不止一个盒子 - 如何改变它？ (jQuery/JS/CSS)

Question

所以我想在我的朋友网站上实施'Read more'。

我实现了我想要的效果，但是当我开始更改框对齐方式时，'Read more' 效果受到影响。

之前：https://codepen.io/szlvga/pen/poNOqpO

之后：https://codepen.io/szlvga/details/yLVQQoY

我希望它只影响我点击 'Read more' 按钮的框，就像在第一个 Codepen 上一样，而不是像在第一个 Codepen 上那样影响行中的所有框第二个 Codepen.

如何实现？提前致谢。

Everything is on codepen.

Answer 1

您的 jQuery 代码是正确的，问题在于您的布局，更具体地说是 flexbox。您的 .row class 有 align-items: stretch，因此当一个项目扩展时，同一行中的所有其他项目将扩展以填充拉伸的 space。

此代码段将解决您的问题：

.row {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start; /* < Align items to top, don't stretch them! */
    flex-wrap: wrap;
}

您可以阅读更多关于 flexbox 和 align-items 属性 here.

'Read more' 影响不止一个盒子 - 如何改变它？ (jQuery/JS/CSS)

'Read more' affecting more than one box - how to change it? (jQuery/JS/CSS)

html

javascript

css

jquery

jquery-ui