0
我的问题如下。我有两列的布局。但是我想要做的事情有点复杂，我在这里没有找到一个很好的教程/问题，它能够准确处理我的问题。移动视图与2列布局的普通视图的CSS动态布局
我有以下图像，它代表我的布局，因为它目前是。
当前页面布局
在移动认为这是期望的结果：
期望的结果
如何确保第一块绿色块位于红色和紫色块之间，但第二块和第三块位于紫色块下方。
这是一个问题，因为该第二块是红数据块的旁边的正常定位并在本地，如果我申请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条件注释的风格激活基于屏幕分辨率的HTML代码？那我可以提出一个整体的其他组HTML的，如果屏幕分辨率...
您的jsFiddle与您的第二张图片不匹配 – Ismatjon
是的，这就是我发布这个问题的原因......这是我期望的结果。 – Tschallacka
哦，我找到了你。 – Ismatjon