中心组的div对齐底部

Question

我想在另一个div中水平放置一组div。我也希望这些div可以与底部对齐。看来我只能得到一个或另一个。

这里是什么，我用下面的代码得到一个小提琴： https://jsfiddle.net/ezka8Lpw/2/embedded/result/

.sandBox{ 
    position:relative; 
    background-color: #00FF00; 
    width: 1440px; 
    max-width:100%; 
    min-height:560px; 
    margin:auto; 
    text-align:center; 
} 
.options{ 
    position:absolute; 
    bottom:0; 
} 
.option-group{ 
    width:240px; 
    height:75px; 
    display: inline-block; 
    margin-left:10px; 
    margin-right:10px; 
    background-color: #EC3538; 
} 
.active-option-group{ 
    text-align:left; 
    height: 240px; 
} 
.active-option-group div{ 
    padding: 10px; 
} 

我如何中心所有三个div的？如果我从选项类中移除位置和底部，则中心可以工作，但它们不会与底部对齐。

Answer 1

您可以使用flexbox轻松完成此操作。只有你的CSS的变化是.options div容器：

https://jsfiddle.net/ezka8Lpw/5/embedded/result/

html, body { 
    padding: 0; 
    margin: 0; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
} 
.sandBox{ 
    position:relative; 
    background-color: #00FF00; 
    width: 1440px; 
    max-width:100%; 
    min-height:560px; 
    margin:auto; 
    text-align:center; 
} 
.options{ 
    position:absolute; 
    bottom:0; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%; 
} 
.option-group{ 
    width:240px; 
    height:75px; 
    display: inline-block; 
    margin-left:10px; 
    margin-right:10px; 
    background-color: #EC3538; 
} 
.active-option-group{ 
    text-align:left; 
    height: 240px; 
} 
.active-option-group div{ 
    padding: 10px; 
} 

下面是关于插件和布局的出局与Flexbox的一个非常优秀的教程：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

UPDATE ：

这里是应该涵盖大多数浏览器的.options的CSS扩展块。我在Safari，Firefox和Chrome中使用了这种布局，但未在各种版本的IE上进行测试。你可以在这里阅读更多关于IE版本的支持https://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx：

.options{ 
    position:absolute; 
    bottom:0; 
    width: 100%; 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    flex-direction: row; 
    -webkit-flex-direction: row; 
    justify-content: center; 
    -webkit-justify-content: center; 
    align-items: flex-end; 
    -webkit-align-items: center; 
}