响应不同行的 HTML css 表

Question

我正在从数据库构建简单的元素列表。 此列表中的每个元素都包含 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 和媒体查询来实现这样的目的？你能给我指出正确的方向吗？

Answer 1

您是否尝试进行媒体查询？我只是想给你一个提示:

HERE用于显示/对齐 div

HERE用于媒体查询

尝试在 div 标签的 CSS 中使用 display 属性。

附言

不要忘记在媒体查询中进行更改，否则它会改变一切。

祝你好运:)