如何在HTML中将一个div对齐到另一个div的底部？

Question

如何在HTML中将一个div对齐到另一个div的底部？

3

我该如何在HTML中将一个div对齐到另一个div的底部？为什么它不起作用？ HTML代码:

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>

CSS：

#big {
    background-color: red;
    margin: 10px;
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    margin: 10px;
    display: inline-block;
}

- David

1

不清楚谁应该在谁的底部，但如果有人要保持在底部，垂直对齐：底部，应该可以做到。 - RGLSV

2

你能发布一张展示你期望结果的图片吗？ - Marcelo

请更好地描述您的要求。目前不太清楚您是如何尝试对齐内容的。这个示例展示了垂直和水平块，它们中有没有一个更接近您想要的？ - Moob

1

为什么你没有像简单的画图软件一样显示图片... 由于你的描述不够清晰，所以很难理解你的问题。 - TheBosti

2

根据您在dragos.bd的回答中的评论，我认为您想要类似这样的东西。http://codepen.io/anon/pen/LEWBGG - Marcelo

5个回答

3

这将起作用： http://jsfiddle.net/4f4ejwr0/5/

#big {
  background-color: red;
  margin: 10px;
  position: relative;
  height: 300px;
}
#bottom {
  position: absolute;
  bottom: 0px;
  margin: 10px;
}
.small {
  width: 150px;
  height: 150px;
  background-color: blue;
  float: left;
  margin-left: 10px;
}

<div id="big">
  <div id="bottom">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
  </div>
</div>

- FINDarkside

这些都堆叠在左下角。你确定这是 OP 想要的吗？ - Moob

好的...它能工作...但是我如何保持底部div内的元素水平居中？在这个解决方案之前，它们是通过div的文本对齐方式居中的，现在它们不再居中了... - Daniel Möller

0

这是你要找的吗？http://jsfiddle.net/swm53ran/94/

应该改为

position: relative;

- indubitablee

0

请在您的CSS类中添加以下内容：

bottom:0 !important;

并删除位置部分。

- CH3M

0

试试这个

    #big {
    background-color: red;
    margin: 10px;
    width: 150px; //new line
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    position: relative; // new line
    margin: 10px;
}

实时 jsfiddle

更新：这样可以吗？Jsfiddle

- TheBosti

谢谢，但它仍然无法运行。小蓝色div仍在大红色div的顶部，我希望它们在大div的底部。更新后的CSS：＃big { background-color：红色; 边距：10px; 宽度：800px; 高度：300px; }.small { 宽度：150px; 高度：150px; background-color：蓝色; 左转：左; 显示：内联块; 底部：0px; 边距：10px; 显示：内联块; } - David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Moob · Accepted Answer

你的问题不太清楚，但是你是指这样吗？...

enter image description here

#big {
    display:table-cell;
    position:relative;
    vertical-align:bottom;
    background-color: red; margin: 10px; width: 800px; height: 300px;
}

.small {
    display: inline-block; 
    width: 150px; height: 150px; background-color: blue; 
    margin: 10px;
}

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>