HTML css表響應不同的行

我正在建立簡單的db項目列表。該列表中的每一項都包含5個元素。在桌面屏幕我有足夠的空間，在這樣的行中顯示所有文件：HTML css表響應不同的行

current desktop preview 在上述原理樣品使用這個CSS表中生成：

<div class="divTable"> 
    <div class="divTableBody"> 
     <div class="divTableRow"> 
      <div class="divTableCell img">PHOTO</div> 
      <div class="divTableCell title">TITLE</div> 
      <div class="divTableCell price">PRICE</div> 
      <div class="divTableCell bids">BIDS</div> 
      <div class="divTableCell timeleft">TIME LEFT</div> 
     </div> 
    </div> 
</div> 

.divTable { 
    display: table; 
    width: 100%; 
} 
.divTableRow { 
    display: table-row; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
} 
.divTableCell, .divTableHead { 
    display: table-cell; 
    padding: 3px 10px; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
    font-weight: bold; 
} 
.divTableFoot { 
    background-color: #EEE; 
    display: table-footer-group; 
    font-weight: bold; 
} 
.divTableBody { 
    display: table-row-group; 
}

我要尋找使用CSS的解決方案媒體查詢，顯示以不同的方式結果移動：

------------------------- 
IMG | Title 
    | Price Bids TimeLeft 
-------------------------

每一行都在後端生成，所以我可以更改整個html結構，但是我沒有任何控制它顯示的寬度，是否有任何選項可以像使用css和媒體查詢一樣實現這一目標？你能指點我正確的方向嗎？

來源

2017-10-04 toHo

做回答[響應表，聰明的方法（https://stackoverflow.com/q/19723617/1016716）幫助？ –

Thabk你！我確定使用來自那裏的信息，我將會解決我的問題。 – toHo

我應該發佈工作答案嗎？ – toHo

您是否嘗試製作媒體查詢？我只是想給你一個提示如何做到這一點：

HERE顯示/對準格

HERE媒體查詢

嘗試在div的CSS與顯示屬性打標籤。

不要忘了做媒體查詢的變化，否則它會改變這一切。

祝你好運:)

來源

2017-10-04 13:27:38 JohnRambo

是的，我已經嘗試過，但coulnd得到的結果，因爲我想。我會讀更多。 – toHo

HTML css表響應不同的行

回答

相關問題