使用CSS/HTML的響應式列布局

-10

我試圖用HTML/CSS實現以下佈局，其中導航元素「A」和「C」位於小屏幕上的主要內容「B」之上並且分佈對應於大屏幕上的左側「A」和右側「C」。使用CSS/HTML的響應式列布局

我的目標是使用常量HTML元素，並且只根據媒體查詢更改CSS樣式。

如何實現這一目標？

Mobile    Desktop 
(small screen)  (large screen) 
+-------------------+ +-----------------------------------+ 
| A | C | | A |  B  | C | 
+-------------------+ +---------+    +---------+ 
|   B   |   |    | 
|     |   |    | 
|     |   |    | 
|     |   |    | 
|     |   |    | 
|     |   |    | 
+-------------------+   +---------------+

HTML

<div> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
</div>

來源

2017-08-29 Pharotek

_「我要問你（社區）的建議，就如何實現這一目標「_ - 建議：請仔細閱讀[請]，做適當的研究（使用CSS的列布局並不是什麼新鮮事物......），然後向我們展示您迄今爲止所嘗試的內容。 – CBroe

我真的不明白在這個問題上反對的票數。它最初有一個很好的解釋，有一個明確的計劃，需要什麼幫助，只缺少一個HTML樣本，並且如果需要的話，它是有問題的，因爲它已經很清楚了。我看到類似的問題已經upvoted – LGSon

@Pharotek如果你喜歡，將現在更新的問題複製到一個新的，通知我，我會將我的答案移動到該問題，你可以刪除這一個，因爲我認爲它沒有贏得所有這些倒票。 – LGSon

-1

使用媒體查詢的CSS。

@media (max-width: 600px) { 
    //Display as u want the tables or divs for small devices 
    //Change width as desired 
} 

@media (min-width: 601px) { 
    //Display as u want the tables or divs for big devices or desktop 
    //Change width as desired 
}

來源

2017-08-29 08:48:41 Flowen

你的空媒體查詢不會有太大的幫助... – Pharotek

-1

僅使用HTML和CSS，我們無法達到此要求。如果您在代碼中使用引導程序。你可以實現。

在引導，我們有響應公用事業概念是有使用，你可以建立自己的上述要求

For your reference

來源

2017-08-29 08:53:37

當然，這可以使用HTML/CSS來完成......並且由於bootstrap也使用它，那麼它不應該能夠嗎？ – LGSon

使用CSS/HTML的響應式列布局

回答

相關問題