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和媒体查询一样实现这一目标？你能指点我正确的方向吗？

做回答[响应表，聪明的方法（https://stackoverflow.com/q/19723617/1016716）帮助？ –

Thabk你！我确定使用来自那里的信息，我将会解决我的问题。 – toHo

我应该发布工作答案吗？ – toHo

答

您是否尝试制作媒体查询？我只是想给你一个提示如何做到这一点：

HERE显示/对准格

HERE媒体查询

尝试在div的CSS与显示属性打标签。

不要忘了做媒体查询的变化，否则它会改变这一切。

祝你好运:)

是的，我已经尝试过，但coulnd得到的结果，因为我想。我会读更多。 – toHo

HTML css表响应不同的行

相关推荐