Question

我有一个具有特定尺寸的持有者div，并且具有不同高度的单个子元素，并且我试图将其与基线对齐。目前，我有一个与容器固定高度相同的第二个元素，使其与底部对齐，但如果它是独立的，它会粘在顶部，无论应用什么规则。

那么，如果元素是唯一的子元素，我怎样才能将元素垂直对齐到容器的底部？

修改

在处理我正在使用的代码的过程中，我想出了一个我发布的解决方案。最初的问题与此类似，但没有position规则，而display:inline-block与子元素有关。这几乎是它的长短......

Answer 1

该死的，在发布了一个很好用的问题之后想到了一个解决方案：

父元素：

.parent {
    height:200px;
    position:relative;
    width:200px;
}

子元素：

.parent > * {
    bottom:0px;
    left:0px;
    position:absolute;
    right:0px;
}

然后，子元素的高度由其中的块元素定义，但它会粘在底部

Answer 2

没有太多细节可以去，但也许是这样的

.container {
  position: relative;
}

.child-element {
  position: absolute;
  bottom: 0;
}

Answer 3

使用table-cell

的一种方法

假设裸骨标记：

<div class="wrap">
    <div>Some content...</div>
</div>

以下CSS将会这样做：

.wrap {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: bottom;
}

主要优点：适用于内联和块级元素缺点：较旧的浏览器无法识别display: table-cell

演示于：http://jsfiddle.net/audetwebdesign/eXKbt/

使用内联块

的替代方式

您也可以通过应用以下CSS来实现：

.wrap2 {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}
.wrap2:before {
    content: "";
    width: 0;
    height: 190px;
    display: inline-block;
}
.wrap2 div {
    display: inline-block;
    width: 190px;
    border: 1px dotted red;
    vertical-align: bottom;
}

但是，这种方法涉及使用伪元素定义虚拟内联块以将基线设置为接近框的整个高度，然后在子元素上使用vertical-align。有一些与宽度有关的问题，但它可以起作用。

请参阅前面的小提琴演示。

垂直使用单个元素对齐底部

3 个答案:

使用table-cell

使用内联块