是否可以使用媒體查詢將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;

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