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轻松完成此任务。只有在.options容器div：

中更改为CSS

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/

<强>更新

这是.options的扩展版块，应涵盖大多数浏览器。我已经在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;
}

div的中心组与底部对齐

1 个答案: