Question

我在常规的Bootstrap Jumbotron中有一个DIV ......

<div class="jumbotron vertical-align">
   <div class="container">
      Content here
   </div>
</div>

我使用这个来对齐底部...

.vertical-align
{
  display:0;
  display:flex;
  -webkit-align-items:flex-end;
  align-items:flex-end;
}

这在任何地方都很有用但在IE9中失败，其中DIV与顶部对齐。我理解Flex在IE9中不起作用，但还需要另一种快速解决方案。

任何方式我都可以用不同的方式让它跨浏览器工作吗？

Answer 1

您可以使用CSS表格：

＆＃13;

.vertical-align {
  display: table;
  height: 100px;
  border: 1px solid;
}
.container {
  display: table-cell;
  vertical-align: bottom;
}

＆＃13;

<div class="jumbotron vertical-align">
  <div class="container">
    Content here
  </div>
</div>

＆＃13;

Answer 2

看看我几分钟前发布的这个问题的答案。 Flex无法在IE 9上运行。

How can I align 2 or more "row" divs to the bottom of a div, without using any kind of "absolute" positioning? Needs IE9+ support

编辑：在案例链接更改时链接内容。

如果你可以使用jQuery，那么这个解决方案可行。这是一个小提琴：https://jsfiddle.net/o47xeze7/3/

HTML

<div class="parent">
    <div class="bottom">
        <div class="child">abcdfg</div>
        <div class="child">abcdfg</div>
    </div>
</div>

CSS

.parent {
    width: 100%;
    height: 20rem;
    border: 1px solid black;
    display: block;
}

.child {
    border: 1px solid red;
    display: block;
}

.bottom {
    display: block;
    position: relative;
}

的jQuery

$(function() {
    var parentHeight = $(".parent").height();
    var bottomHeight = $(".bottom").height();
    var difference = parentHeight - bottomHeight;

    $(".bottom").css("margin-top", difference);
});

垂直对齐DIV到Bootstrap Jumbotron的底部在IE9中使用flex失败

2 个答案: