我有 5 列，我將它們作為表格，因為這是我編碼的最簡單方法。
我想讓它們堆疊在移動視圖上。我該如何去做呢？
我的格式是：
#container {
display: table;
width: 100%;
table-layout: fixed;
padding: 10px;
}
.content {
display: table-cell;
text-align: center;
border: 5px solid black;
word-wrap: break-word;
}
.content img {
width: 100%;
height: 100%;
display: table-header-group;
}
<div id="container"> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
如有任何幫助，我們將不勝感激。我嘗試使用媒體查詢將內容類別設定為 100% 的寬度。如果可能的話，我希望它們能夠堆疊起來。我不確定我哪裡出錯了。
我嘗試在表格方法之前使用flexbox，但是當螢幕尺寸改變時遇到了有關高度的問題，這對我來說更容易做到，我只是不知道如何使其具有移動響應能力。因為它不是一個實際的表格，所以我有點困惑。
如果您喜歡目前的桌面設置，最簡單的方法是將上面的所有 CSS 包裝在
@media查詢中以適應更大的螢幕。就像@media (min-width: 768px) { ... all your CSS }- 這樣，行動裝置上的任何內容都不會受到這些樣式的影響。預設情況下，div是區塊級元素，並且將是 100% 並堆疊。/* COMMON STYLES THAT WILL AFFECT ALL SCREENS - just for presentation and can be removed */ .content { border: 5px solid black; background: blue; height: 20px; margin-bottom: 10px; } /* now this will only apply to larger screens */ @media (min-width: 768px) { #container { display: table; width: 100%; table-layout: fixed; padding: 10px; } .content { display: table-cell; text-align: center; word-wrap: break-word; /* REMOVE THIS from your real code, just a reset from the global above */ margin-bottom: 0; background: transparent; height: auto; } .content img { width: 100%; height: 100%; display: table-header-group; } }