当一个元素的大小发生变化时，如何在同一个 Div 中保持 HTML 元素之间的边距/不变

Question

我在 HTML 元素中遇到了边距问题。这是代码示例。

<body>
  <div>
    <h1>...some text...</h1>

    <p>..some quote</p>

    <button>New Quote</button>
  </div>
</body>

单击 button 后，<p> 中的引号会发生变化。因此 p 元素的高度根据引用的长度增加或减少。然后，这会将按钮的位置向上或向下移动到页面。我不想按按钮向上或向下移动。我可以通过将按钮放在单独的 div 中来做到这一点，但是是否可以在 <p> 和 <button> 之间设置一个边距，这样位置就不会改变？

谢谢

Answer 1

有几种方法可以做到这一点，它与 Twitter Bootstrap 完全无关。它是通用的 HTML + CSS，因此也适用于 Twitter Bootstrap。

考虑以下通用 HTML 结构：

<container>
    <quote>
        some quote
    </quote>
    <button>
        some button
    </button>
</container>

...您有以下 备选方案 选项：

min-height 在 <quote> 上，足够大以覆盖您的 <quote>s

height

container quote {
  min-height: 50vh;
}

min-height 和 padding-bottom 在 <container> 上并放置 <button> 绝对值，到底部：

container {
  min-height: 50vh;
  padding-bottom: 80px;
  position: relative;
}
container button {
  position: absolute;
  bottom: 15px;
}

min-height on <container> with flexbox column layout with justify-contents:space-between;:

container {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  justify-contents: space-between;
}

justify-contents: space-between 的替代方案，如果您希望 <quote> 始终在可用的 space 中增长（即它有一个 background-color）是 flex-grow:1 在 <quote> 上：

container {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
}
container quote {
  flex: 1;
}

请随意将上述示例中的 50vh 替换为您想要的高度（在 px、em、rem、cm、in...)。除非它在物理 height 或 min-height 的容器内（以上述单位表示 — a.k.a。hard 单位）使用 % 不会使您的元素获得所需的高度，因为它将是 % 的 <body> 高度，这不是视口高度 - 除非另有说明，否则它是其正常流动的所有结果高度的总和内容。

要理解为什么 <body> 的 100% 高度不是视口的 100% 高度，需要理解 VFM properly (or VBM 正如我现在看到的正式称呼）。
the spec can be found in this SO Community curated answer.

的一个很好的概述

当一个元素的大小发生变化时，如何在同一个 Div 中保持 HTML 元素之间的边距/不变

How can i keep the margin/ between to HTML elements constant in the same Div when the size of one changes

html

css

margin