CSS：盒子定位和响应

Question

在我的几个页面上（目前该网站正在开发中），将显示一些天气信息：LINK CSS 问题描述：在标题 WETTER 下可以看到 4 个框。一个显示今天的天气（HEUTE），下面的三个框显示接下来几天的天气。如您所见，这 3 个小框的总和并不完全等于 100% 的帧宽。此外，uppor 宽框的宽度略有不同。

--> 怎么可能达到以下？ a) 当在横向视图中使用网络浏览器/IPAD 时，3 个框加在一起的宽度与上面的宽框完全相同，并且在同一时间 b) 使用 iPhone/Android 浏览页面时，在彼此下方有四个框（页面宽度为 100%）。期待您的任何提示。

Answer 1

我想我已经明白你想要什么了。

我在http://jsfiddle.net/Txjh5/做了一个粗略的演示

使用整体容器来模拟您的框架宽度 - 这有一个最大宽度。 这些框的百分比与顶框匹配，但使用边距我在框之间创建了间隙。

.last {margin-right: 0;}

删除最后一个框的边距。

媒体查询用于较小的屏幕尺寸，以强制每个框为 100% 宽度。

抱歉，如果我误解了这个问题，请看一下演示，因为它比我能更好地解释事情！