是否可以使用媒体查询将display：table-cell转换为两行？ （同时保持垂直对齐）

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

具有显示的元素：table-cell将像单个表行中的单元一样工作，除非您更改标记。

要获得您描述的行为，可以在您的断点处添加一个范围，使其从“ display：inline”捕捉到“ display：table-row”。

Answer 2

以后很混乱：...

答案是肯定的，如果每个单元格的高度都固定，并且您愿意通过黑客解决空白问题：

@media screen and (max-width: 768px) {
    .col8 {
        width:25%;
    }
    .companylist .col {
        display:inline;
        margin:0 0 0 -3px;
        padding:0;
    }
    .companylist .col:first-child {
        margin:0;   
    }
    .companylist .col img {
        display:inline-block;
        max-height:200px; 
        max-width:25%;  
        vertical-align:middle;
    }
}

基本上将原始“单元格”设置为display:inline; ，添加负的左边距以抵消空白（确保第一个空白没有），使单元格的内容display:inline-block;

不完美 ，但是好多了 ...