CSS:盒子定位和响应

时间:2013-02-02 12:26:26

标签: css alignment responsive-design

在我的几个页面上(目前该网站正在开发中),将显示一些天气信息:LINK CSS问题描述:在标题WETTER下你可以看到4个方框。一个显示今天的天气(HEUTE),下面三个方框显示接下来几天的天气。正如您所看到的,3个小盒子并没有完全相加到100%的帧宽。此外,uppor宽盒的宽度略有不同。

- >怎么可能达到以下目的? a)在横向视图中使用WEBBROWSER / IPAD时,将3个盒子组合在一起,以加宽与宽盒子完全相同的宽度,并且在同一时间 b)使用iPhone / Android浏览页面时,彼此之间有四个框(页面宽度为100%)。期待您的任何暗示。

1 个答案:

答案 0 :(得分:0)

我想我已经理解了你想要的东西。

我在http://jsfiddle.net/Txjh5/

做了一个粗略的演示

使用整体容器来模拟帧宽 - 这具有最大宽度。 这些框的百分比与顶部框相匹配,但使用边距我在框之间创建了间隙。

.last {margin-right: 0;}

删除最后一个框的边距。

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

很抱歉,如果我误解了这个问题,请看看演示,因为这比我能解释的更好!