如何将内容对齐到div底部？

Question

jsFiddle

HTML

<div id="a">
  <div id="b">bbb</div>
  <div id="c">ccc</div>
</div>

CSS

#a {
  border: 1px solid black;
   *zoom: 1;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
  float: right;
  background-color: red;
}

我希望将红色盒子（#c）对齐到右下角。
如果我在#a添加position:relative，并在#c中添加position:absolute;bottom:0;right:0，它可以工作。但是，一旦我也对蓝色框和容器（#a）添加这些属性，容器就会崩溃。我不知道哪个会更高，#b 还是#c，所以我想应用这两个元素的定位。通常的清除浮动对绝对定位的元素无效。
那么，如何不使容器div #a 崩溃的情况下，将#b定位到左下角，并将#c定位到右下角？

- mpen

---

@SolèneLeVan：是的，使用display:table-cell也一样。但我无法让它正常工作。 - mpen

+1，非常好的问题。顺便问一下，您需要 IE 支持吗？只是好奇。 - Fabrício Matté

使用JavaScript是一个选项吗？ - Sanchit

@Sanchit：我的实际示例稍微复杂一些。这是我的解决方案，使用Jade和Less编写：http://jsfiddle.net/gaB7D/ 我不得不在ul周围添加一个额外的包装器才能使其正确对齐。 - mpen

@ZackT。我猜这是针对我的...就像我说的，它是用Jade编写的。http://jade-lang.com/ - mpen

Answer 1

这是一个相当专业的解决方案，但它确实有效 :)

将 #b 和 #c 都设置为 inline-block，使它们像常规内联元素一样工作，并且我们可以使用 vertical-align。然后在容器中添加 text-align:justify;，并使用 :after 和 width:100% 将 #b 和 #c 拉到左侧和右侧。将容器的字体设置为零（并在内部块中恢复它）以避免下划线/上划线和其他间隙，并将零字体设置为 :after。

#a {
  border: 1px solid black;
  text-align:justify;
  font-size:0;
  line-height:0;
}
#a:after {
  content:"";
  display:inline-block;
  width:100%;
}

#b, #c {
  display:inline-block;
}

#b {
  vertical-align:top;
}
#c {
  vertical-align:bottom;
}

font-size:0; 在IE浏览器中似乎无效，因此我们需要一个小的解决方法，使用1px的负边距：

/* ie fix */
#a {
  font:1px/0 sans-serif;
}
#b, #c {
  margin:0 0 -1px;
}

代码编辑器：http://jsfiddle.net/gv4qd/35/

- antejan

---

好的，第一次没明白。只需将#b的vertical-align更改为bottom http://jsfiddle.net/gv4qd/37/ - antejan

关闭...你的针对IE的-1px边距修复实际上会使盒子在Chrome中超出#a的边框。 - mpen

大部分问题已经在 http://jsfiddle.net/gv4qd/42/ 中解决了，但是在 Chrome 中右侧出现了一个额外的像素。很抱歉，我现在找不到解决方案。你可以使用条件注释来过滤 IE 样式。 - antejan

只需加上一点点魔法letter-spacing:-1px;，它就能工作了，但我真的不喜欢这个解决方案，并且由于潜在的错误，我不能推荐它。http://jsfiddle.net/gv4qd/43/ - antejan

现在看起来没问题。我找到了另一种解决方案，它使用了 display:table 和 display:table-cell...不确定这样做是否更容易出错。 - mpen

Answer 2

我相信这样做就可以了

position: absolute;
top: auto;
bottom: 0px;

目前无法测试，稍后再测试，只需在要底部对齐的 div 上使用 css 即可。

- user1002029

Answer 3

经过一些尝试，这似乎可以工作。诀窍是绝对定位#a、#b和#c，并将所有三个放置在相对定位的

中。

HTML

<div id="alpha">
  <p>Here is a box to give the<br /> outer<br /> container<br /> some<br /> height</p>
  <div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
  </div>
</div>

CSS

#alpha {
  position: relative;

}

#a {
  border: 1px solid black;
   *zoom: 1;
  position:absolute;
  height:100%;
  width:100%;
  top:0;bottom:0;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  font-size: 36px;
  background-color: blue;
  position: absolute;
  left:0;
  bottom:0;
}

#c {
  background-color: red;
  position: absolute;
  right:0;
  bottom:0;
}

JSFiddle http://jsfiddle.net/mrmikemccabe/gv4qd/36/

我在外部div中放置了一个段落，以便为框添加一些高度。如果您不会在外部div中放置任何内容，请在CSS中声明外部div的固定高度。

- punkrockbuddyholly

---

这就像是 Maciej Paprocki 的解决方案。我想避免硬编码高度（或使用虚拟内容）。 - mpen

它与Maciej Paprocki的不同之处在于多了一个包含DIV。肯定#a会在另一个容器中？还有其他东西吗？只需为容器设置position:relative和#a，#b，#c position:absolute即可。无需为#a定义高度，这就是您所要求的。 - punkrockbuddyholly

给#a设置position:relative并不能防止它崩溃，我不确定这样做有什么好处。这只有在#alpha中有其他内容可以拉伸它的情况下才有效，但我没有这种情况。 - mpen

我没有说要给#a设置position:relative。 - punkrockbuddyholly

抱歉，我以为你在说“容器”时是指＃a，因为在我的原始示例中＃a 是 容器。不过无论如何，其余部分仍然适用。 - mpen

Answer 4

经过尝试几种不同的选项，我发现在父容器上使用position:relative可以使子标签绝对定位，但相对于父容器而非文档窗口。

#a {
    border: 1px solid black;
    height: 500px;width:500px;
    position:relative;
    }

#b, #c{
       position:absolute;bottom:0;
      }
#b{
    left:0;
    font-size: 36px;
    background-color: blue;
    }

#c {
    right:0;
    background-color: red;
    }

- lukeocom

---

就目前而言，我不会将此视为答案。请_解释_您的解决方案，并提供它。 - Bojangles

它能够工作是因为你给了一个固定的高度.. 我猜这不是 OP 想要的.. (我不确定，因为 OP 没有提到).. - Mr_Green

我也会假设父容器包含一些内容，如果没有的话，可能会使用min-height？但是谁知道呢.. - lukeocom

Answer 5

尝试在你的CSS文件中加入以下内容：

   #a {
        border: 1px solid black;  
        position:relative;
       *zoom: 1;
    }
    #a:before, #a:after {
       display: table;
        content: "";
        line-height: 0;
    }
    #a:after {
      clear: both;
    }

    #b {
      float: left;
      font-size: 36px;
      background-color: blue;
    }

    #c {
        float: right;
        background-color: red;
        position: absolute;
        bottom:0px;
        right:0px;
    }

- Andrew Johnson

---

你没有仔细阅读问题。你将#c进行了绝对定位，而不是#b——如果你将字体大小从#b移动到#c，对齐就会出现问题。假设我不知道哪个文本会更大/更高。 - mpen

Answer 6

请尝试以下操作：

#a {
  border: 1px solid black;
  *zoom: 1;
}
#a:before, #a:after {
  display: table;
  content: "";
  line-height: 0;
}
#a:after {
 clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
   float: right;
   background-color: red;
   position:absolute;
   bottom:0; right:0;
   vertical-align:bottom;
 }

- Umesh

---

就目前而言，我不会将此视为答案。请 解释 您的解决方案，并提供它。 - Bojangles

这并不能让#c div保持在#a div内部。不是一个可行的解决方案。 - Zack

Answer 7

给外部div设置position:relative

给内部div设置position:absolute和bottom:0px; left:0px;或者你喜欢的任何位置。

给外部div设置position:relative非常重要。如果不这样做，有时会工作，有时不会。当然，在像everything这样的非常旧的Internet Explorer中它将无法工作。

绝对定位的元素没有高度，因此如果您不能使用指定的高度（如height:120px），那么您就会遇到麻烦。您只能通过JavaScript来检查一个绝对定位元素和第二个元素的高度，并添加特殊的边距来解决这个问题。

为了确保哪个容器在顶部，您可以使用z-index。

我忘记了还有另一种方法。使用两个div的虚假重复内容，但这是很多工作，所以用JavaScript做会更快。

- Maciej Paprocki

---

是的，我在我的问题中提到了绝对定位的解决方案，但正如你所提到的，它会使容器div崩溃。我不想硬编码高度。 - mpen