響應表和堆疊列

要使一個HTML組件，其響應，我想用一個媒體查詢該表中的列對組合：響應表和堆疊列

<div style="display: table"> 
    <div style="display: table-cell">1</div> 
    <div style="display: table-cell">2</div> 
    <div style="display: table-cell">3</div> 
    <div style="display: table-cell">4</div> 
</div>

爲了類似於它（有效的）東西：

要做到這一點

<div style="display: table"> 
    <div style="display: table-cell"> 
     <div style="display: block">1</div> 
     <div style="display: block">2</div> 
    </div> 
    <div style="display: table-cell"> 
     <div style="display: block">3</div> 
     <div style="display: block">4</div> 
    </div> 
</div>

一種方法是圍繞額外div的第一個類似這樣的標記：

<div style="display: table"> 
    <div style="display: inline"> 
     <div style="display: table-cell">1</div> 
     <div style="display: table-cell">2</div> 
    </div> 
    <div style="display: inline"> 
     <div style="display: table-cell">3</div> 
     <div style="display: table-cell">4</div> 
    </div> 
</div>

然後，在斷點處，相應地更改顯示屬性。那有效嗎？有沒有更好的辦法？（請注意，由於各種原因，我需要使用顯示「表」和「表格單元格」）。

來源

2017-06-15 stepanian

你的問題有點含糊，所以很難提供確切的答案。我建議設置一個jsfiddle，以便更具體。這就是說，如果你想要有響應的HTML組件，最簡單的方法可能是使用網格系統，如Materialize和Bootstrap提供的網格系統。

如果有一個原因，爲什麼這些不會爲你工作，讓我知道，也許我（或其他人）可以爲你提供更具體的東西。

來源

2017-06-15 19:34:29 yoursweater

我不確定你覺得模糊的部分是什麼問題。請不要成爲認爲每個問題都可以通過框架解決的人。此外，這不是一個答案，它是一個評論。請刪除它，以便其他人可以回答這個問題。謝謝。 – stepanian

我真的認爲你可以在進攻端減少一點。無論如何，如果您只是使用媒體查詢來調整每個div的寬度，則不需要添加額外的標記。如果你希望它是2x2而不是4x1，只需將div寬度改爲50％即可。這將迫使兩個顯示在第二行。 – yoursweater

將寬度更改爲50％將不起作用，因爲這些是表格和表格單元格。 – stepanian

響應表和堆疊列

回答

相關問題