異なる行に応答するHTML CSS表

Question

私はdbから項目の単純なリストを構築しています。 このリストの各項目には5つの要素が含まれています。私は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とメディアクエリを使ってsthを実現するオプションはありますか？正しい方向に向けることができますか？

Answer 1

メディアクエリを作成するかどうかを試しましたか？私はちょうどあなたがそれを行うにはどのようにヒントを与えるつもりです：

HEREメディアクエリのためのdiv

HEREを揃える/

を表示するためのdivのCSSで表示属性でプレイしてみてくださいタグ。

PS

は、それ以外の場合は、それをすべて変更しますメディアクエリーの変更を行うことを忘れないでください。

幸運:)