Question

我希望能够将div浮动到容器的底部。我使用绝对定位来实现这一目标：

＆＃13;

#outer {
  background: lightblue;
  min-height: 100px;
  padding: 20px;
  position: relative;
  }

#inner {
  background: red;
  position: absolute;
  bottom: 20px;
}

＆＃13;

<div id=outer>
  <div id=inner>BLAH BLAH</div>
  </div>

＆＃13;

在上面，为了使定位尊重外部容器底部的边框，我必须用20px重复bottom: 20px填充。我的问题是，这违反了DRY原则 - 当我改变其中一个数字时，我不希望这一点破裂。

尊重填充的示例是float。如果我float向左或向右，它只会浮动到填充。

我怀疑我可以使用带有变量的预处理器（比如LESS？） - 但不包括它，有没有办法做到这一点？

Answer 1

嗯，当然是flexbox，但我不确定这是多么可扩展。

＆＃13;

#outer {
  background: lightblue;
  min-height: 100px;
  padding: 20px;
  display: flex;
}
#inner {
  background: red;
  align-self: flex-end;
}

＆＃13;

<div id=outer>
  <div id=inner>BLAH BLAH</div>
</div>

＆＃13;

Answer 2

使用边距而不是填充？

＆＃13;

#outer {
  background: lightblue;
  min-height: 100px;
  margin: 20px;
  position: relative;
  }

#inner {
  background: red;
  position: absolute;
  bottom: 0px;
}

＆＃13;

<div id=outer>
  <div id=inner>BLAH BLAH</div>
  </div>

＆＃13;

Answer 3

只需使用css＆＃34; bottom: 0;＆＃34;在子元素中。

Answer 4

我决定在采用div属性的#inner div之前选择另一个min-height：

＆＃13;

#outer {
  background: lightblue;
  padding: 20px;
  }

#beforeinner {
  min-height: 100px;
  }

#inner {
  background: red;
}

＆＃13;

<div id=outer>
  <div id=beforeinner></div>
  <div id=inner>BLAH BLAH</div>
</div>

＆＃13;

是否可以将div浮动到其容器的底部（具有填充）？

4 个答案: