我有 5 列，我將它們作為表格，因?yàn)檫@是我編碼的最簡(jiǎn)單方法。
我想讓它們堆疊在移動(dòng)視圖上。我該如何去做呢？
我的格式是：
#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>
如有任何幫助，我們將不勝感激。我嘗試使用媒體查詢將內(nèi)容類別設(shè)定為 100% 的寬度。如果可能的話，我希望它們能夠堆疊起來(lái)。我不確定我哪裡出錯(cuò)了。
我嘗試在表格方法之前使用flexbox，但是當(dāng)螢?zāi)怀叽绺淖儠r(shí)遇到了有關(guān)高度的問(wèn)題，這對(duì)我來(lái)說(shuō)更容易做到，我只是不知道如何使其具有移動(dòng)響應(yīng)能力。因?yàn)樗皇且粋€(gè)實(shí)際的表格，所以我有點(diǎn)困惑。
1
0
0
如果您喜歡目前的桌面設(shè)置，最簡(jiǎn)單的方法是將上面的所有 CSS 包裝在 @media 查詢中以適應(yīng)更大的螢?zāi)弧＞拖?@media (min-width: 768px) { ... all your CSS } - 這樣，行動(dòng)裝置上的任何內(nèi)容都不會(huì)受到這些樣式的影響。預(yù)設(shè)情況下，div 是區(qū)塊級(jí)元素，並且將是 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;
}
}
<div id="container"> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
