使用CSS/HTML的响应式列布局

问题描述：

我试图用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>

_“我要问你（社区）的建议，就如何实现这一目标“_ - 建议：请仔细阅读[请]，做适当的研究（使用CSS的列布局并不是什么新鲜事物......），然后向我们展示您迄今为止所尝试的内容。 – CBroe

我真的不明白在这个问题上反对的票数。它最初有一个很好的解释，有一个明确的计划，需要什么帮助，只缺少一个HTML样本，并且如果需要的话，它是有问题的，因为它已经很清楚了。我看到类似的问题已经upvoted – LGSon

@Pharotek如果你喜欢，将现在更新的问题复制到一个新的，通知我，我会将我的答案移动到该问题，你可以删除这一个，因为我认为它没有赢得所有这些倒票。 – LGSon

答

使用媒体查询的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 
}

你的空媒体查询不会有太大的帮助... – Pharotek

答

仅使用HTML和CSS，我们无法达到此要求。如果您在代码中使用引导程序。你可以实现。

在引导，我们有响应公用事业概念是有使用，你可以建立自己的上述要求

For your reference

当然，这可以使用HTML/CSS来完成......并且由于bootstrap也使用它，那么它不应该能够吗？ – LGSon

使用CSS/HTML的响应式列布局

相关推荐