javascript - 调整文本大小时如何确保元素保持相同的高度？

Question

如果窗口调整文本“插入自身”并且按钮被按下。

按钮无处不在。我希望按钮位于同一位置。

Check external fiddle to be able to resize to desktop

Answer 1

问题是您的按钮会将它们自己置于对文本内容的引用中。

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

方案一:flexbox

---> JS Fiddle <---

方案二: min-height

您可以在 p 上设置一个类似于最长文本的 min-height 值，例如在 fiddle 中我使用了 180px，但是请注意，如果 button 和文本很短，您可能会在文本之间有间隙，这也会根据视口(viewport)的宽度而有所不同，因为如果 reduced 会缩小文本并将其向下推到溢出 min -高度，尝试找到一个平衡点。

将 min-height 添加到 section article p。 (根据您的利益调整值 - 请注意，添加 p 的 border 只是作为高度的引用)。

---> JSFiddle <---