3列布局，中间列+ RWD内有1列

Question

我在尝试弄清楚如何在CSS中完成此布局时遇到了问题。我可以将下面的示例的左侧放得很好，右边有一个浮点数，但是我正在努力解决这个问题，所以在屏幕尺寸较小的情况下使用响应式网页设计我会得到右边的结果。

也许这是漫长的一天，但我似乎无法知道如何实现这一目标。我的主要难题是将整个屏幕的TOP RIGHT紫色框放到屏幕尺寸较小的BOTTOM上。

Answer 1

您有任何我们可以查看的代码吗？ 您可以阅读有关@media css属性的信息： http://mislav.uniqpath.com/2010/04/targeted-css/

这样您就可以根据屏幕尺寸自定义响应式设计。

此解决方案应解决您的问题，

http://jsfiddle.net/7nshG/1/

您应该将position:relative提供给容器，然后

position:absolute; 
bottom:0;

给孩子。

Answer 2

有很多方法。假设您不是首先从移动设计（并且您使用浮动来实现布局），那么完全编码布局以满足您的桌面规范。

在移动断点处，将每个元素设置为100％宽度。浅蓝色容器中的内容将紫色框向下推到页面上。如果您使用浮动编码桌面布局，则可能需要求助于清除，但我对此表示怀疑。这是一个小提琴：

http://jsfiddle.net/bresson/7nshG/13/

.container {
    max-width:300px
}
#blue {
    border-color: blue;
    border-style: solid;
    border-width: 1px;
    width:100%;
}
#blue p {
    margin-bottom: 20px;
}
#lightBlue {
    width:100%;
    height: 50px;
    border-color: lightBlue;
    border-style: solid;
    border-width: 1px;
}
#purple {
    border-color: purple;
    border-style: solid;
    border-width: 1px;
    height:100px;
    width:100%;
}