【发布时间】：2014-02-24 23:48:34
【问题描述】：
我的问题如下。我有一个两列布局。但是我想做的事情有点复杂，而且我还没有在 stackoverflow 上找到一个很好的教程/问题来准确地处理我的问题。
我有以下图像，它代表了我目前的布局。
当前页面布局
在移动视图上，这是期望的结果：
想要的结果
如何确保第一个绿色方块位于红色和紫色方块之间，而第二个和第三个方块位于紫色方块下方。
这是一个问题，因为如果我应用Two column layout, fixed right column 的解决方案，第二个块位于红色块旁边的正常位置，并且在局部结束于红色块下方
我提供了一个 JSfiddle http://jsfiddle.net/mdibbets/LgKP5/ 来复制这种情况。
HTML
<div id="red">
<div id="yellow1">
<span>1</span>
</div>
<div id="yellow2">
<span>2</span>
</div>
</div>
<div id="black">
<div id="green1">
<span>1</span>
</div>
<div id="green2">
<span>2</span>
</div>
<div id="green3">
<span>3</span>
</div>
</div>
<div id="blue">
<div id="purple1">
<span>1</span>
</div>
<div id="purple2">
<span>2</span>
</div>
<div id="purple3">
<span>3</span>
</div>
</div>
CSS
span
{
display:inline-block;
margin: 50px 50px;
font-size:4em;
font-weight:800;
text-shadow: 3px 3px 10px gray;
font-family:sans-serif;
}
#red {
background-color:red;
border: 1px solid brown;
display:inline-block;
}
#yellow1, #yellow2
{
background-color:yellow;
border: 1px solid lightbrown;
}
#black
{
display:inline-block;
border:1px solid black;
background-color:gray;
}
#green1, #green2, #green3
{
display:inline-block;
background-color:lime;
border:1px solid darkgreen;
}
#blue
{
display:inline-block;
border:1px solid darkblue;
background-color:lightblue;
}
#purple1, #purple2, #purple3
{
display:block;
border: 1px solid darkpurple;
background-color:purple;
}
/* desktops and big resolution screens that can handle the normal layout */
@media only screen and (min-width: 875px) {
#red {
width:600px;
}
#yellow1, #yellow2
{
width:250px;
height:300px;
margin:20px;
float:left;
}
#black
{
float:right;
}
#green1, #green2, #green3
{
clear:both;
float:right;
width:200px;
height:150px;
margin:20px;
}
#blue
{
width:600px;
}
#purple1, #purple2, #purple3
{
width:150px;
margin:25px;
float:left;
height:200px;
}
}
/* small screens */
@media only screen and (max-width: 875px) {
#red {
width:100%;
}
#yellow1, #yellow2
{
width:90%;
margin:5%;
float:left;
}
#black
{
width:100%;
}
#green1, #green2, #green3
{
width:90%;
margin:5%;
}
#blue
{
width:100%;
}
#purple1, #purple2, #purple3
{
width:90%;
margin:5%;
}
}
将“绿色块”作为一个整体进入动态模式是没有问题的。 但是“分裂”它们是一个完全不同的问题。
是否可以根据屏幕分辨率以 IE 条件 cmets 样式激活 html 代码？如果屏幕分辨率是……我可以呈现另一组 HTML...
【问题讨论】：
-
您的 jsFiddle 与您的第二张图片不匹配
-
是的，这就是我发布问题的原因...这是我想要的结果。
-
唯一的方法是使用
Flexbox。 -
Flexbox 很有趣...但是在现实世界中，对于日常消费者来说，您必须处理“旧”标准...请记住它何时可能成为主流 2 或3年
标签： html css responsive-design