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

Question

我在试图弄清楚如何在 CSS 中完成此布局时遇到问题。我可以在下面的示例的左侧使用浮动右侧很好，但是我正在尝试解决它，因此在较小的屏幕尺寸下使用响应式网页设计我会在右侧得到结果。

也许这是漫长的一天，但我似乎不知道如何实现这一点。我的主要难题是让紫色框从全屏右上到更小的屏幕尺寸下。

Answer 1

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

通过这种方式，您可以根据屏幕尺寸自定义响应式设计。

该解决方案应该可以解决您的问题，

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

你应该给position:relative容器，并且

position:absolute; 
bottom:0;

到子 div。

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%;
}