html - 是否可以使用媒体查询来显示 :table-cell into two lines?(同时保持垂直对齐)

Question

我有这个例子:http://jsfiddle.net/35Js5/7/

当浏览器窗口低于特定宽度时，我希望能够将我漂亮的图像行分成两行。顶行 (.companylist) 是我目前拥有的，底行 (.companylist2) 是我尝试过的 (display:inline-block 方法，无济于事)。

基本上我需要尽可能保持 HTML 结构并保持图像的垂直对齐(如果框对它们来说太小，它们会按比例缩小)。

CSS:

.col {
    box-sizing:border-box;
    display:inline-block;
    float:left;
    padding:10px 10px;
}
.col1 {
    width:100%;
}
.col2 {
    width:50%;
}
.col4 {
    width:25%;
}
.col8 {
    width:12.5%;
}
.companylist {
    display:table;
    table-layout:fixed;
}
.companylist .col {
    display:table-cell;
    height:200px;
    vertical-align:middle;
    float:none;
}
.companylist .col img {
    max-height:100%;
    max-width:100%;
}

.companylist2 {
    display:inline-block;
}
.companylist2 .col {
    display:inline-block;
    height:200px;
    vertical-align:middle;
    float:none;
}
.companylist2 .col img {
    max-height:100%;
    max-width:100%;
}

@media screen and (max-width: 768px) {
    .mindmap .cell > p {
        font-size:1em;
    }
    .col8 {
        width:25%;
    }
    .col4 {
        width:50%;
    }
    .col2 {
        width:100%;
    }
}

Answer 1

具有 display: table-cell 的元素将像单个 table-row 中的单元格一样，除非您更改标记。

要获得您描述的行为，您可以在断点处添加一个从“display: inline”到“display: table-row”的跨度。