html - 将 3 个 div 框并排放置在较宽的单个 div 下方

Question

我试图让 3 个 div 全部并排位于另一个 div 下方(其中包含 h1 和其下方的一段小文本)。我在做这件事时遇到了一些麻烦。

我的目标是这样的:

我尝试在主标题 div 下方放置一个 div(包含其他 3 个 div)。

我尝试过这个CSS:

.content-info {
    text-align: center;
    font-family:'Montserrat', sans-serif;
    top: 80%;
    left: 50%;
    text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
    width:300px;
    padding:25px;
    margin: 25px;
} 

这是我到目前为止所得到的 JSFiddle:http://jsfiddle.net/4zx9gxgL/

有什么建议/想法吗？

Answer 1

您可以使用 display:table-row 和 display:table-cell 使其像表格一样工作。

例如:

.content-info {
    text-align: center;
    font-family:'Montserrat', sans-serif;
    display: table-row;
}
.content-info div {
    width:300px;
    padding:25px;
    margin: 25px;
    display: table-cell;
}

您可以删除 css 中的 .one{}、.two{}、. Three{}