在调整文本大小时如何确保项目保持相同的高度？

Question

如果窗口调整了文本的大小，那么＃34;会推动自己＆＃34;并按下按钮。

button到处都是String.prototype.replaceAll = function (searchText, replacementText) { return this.split(searchText).join(replacementText); }; var text = "This is Sample Text"; text.replaceAll(" ", "-"); //final output(This-is-Sample-Text) 。我希望按钮位于同一个地方。

Check external fiddle to be able to resize to desktop

Answer 1

问题是您的button会将自己置于文本内容的引用中。

编辑：我刚刚注意到你正在使用flex，所以为什么不利用它。

解决方案1： flexbox

<强> ---> JS Fiddle <---

解决方案2： min-height

您可以在min-height上设置一个类似于最长文本的p值，例如我使用的小提琴180px，但请注意button之间可能存在差距如果后者非常短，则文本和文本也会根据视口的宽度而变化，因为如果缩小将缩小文本并将其向下推到溢出min-height，请尝试找到平衡点。

将min-height添加到section article p。 （根据您的利益调整价值 - 请注意p＆＃39; s border仅作为身高的参考而添加。

<强> ---> JSFiddle <---