我的网站有一个主要部分、一个包含按钮的底部栏，然后是两个信息部分。当设备处于横向模式时，我希望主要部分位于左侧，两个额外部分垂直堆叠在右侧，底部栏位于底部。像这样:
当设备纵向放置时，我希望主要部分位于中间，两个额外的部分垂直堆叠在其上方，底部栏位于底部。像这样:
在每一个中，主要部分都需要调整到尽可能大(图片有点误导)。我已经能够使用表格单独实现每一个，但是，我想避免必须拥有所有内容的两份副本并且在屏幕旋转时只隐藏一个或另一个。
有什么好的方法可以做到这一点吗？我已经在使用 jQuery，所以我不反对使用它，但理想情况下，如果我可以只用纯 CSS 来实现，那就太棒了。
附言这是一个网络应用程序，因此它需要在没有任何滚动条的情况下填满整个屏幕。
最佳答案
你可以使用 CSS 解决这个问题，没问题。
定义您的第二个布局开始的分辨率，并使用该分辨率的媒体查询将您的主要区域向左浮动，将两个信息部分向右浮动。对所有这些都使用 % 宽度。
更简单的方法是使用 Twitter Bootstrap并使用它们的网格定义这些布局。
关于html - 响应式 4 部分布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42490642/