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>，足以覆盖height的所有当前可能的<quote>

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

<container>

flexbox

justify-contents:space-between;

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

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

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

您可以使用所需的高度（50vh，px，em，rem，{{1}随意替换上述示例中的cm } ...）。除非它在具有物理in或height的容器内（以上述单位表示 - 也称为硬单位），否则使用min-height将不会使您的元素获得期望的高度，因为它将是%高度%，这不是视口高度 - 除非另有说明，它是其正常流内容的所有结果高度的总和。

要理解为什么<body> 100％高度不是视口的100％高度，需要正确理解VFM（或VBM，因为我现在正式调用它。）<登记/> 可以在此SO the spec中找到Community curated answer的完整概述。

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

1 个答案: