Question

我们五个人花了一天半的时间研究这个 - 得到了一些非常接近的解决方案，但似乎没有拉入Javascript就不可能做到。

方案我们正在使用响应式（基于媒体查询），960网格布局。有四个内容的div。这四个div需要在语义上按照下图所示的顺序。由于它是960网格，我们每个“行”也有包装div - 就像这样：

<div id="topzone">
  <div id="one">1</div>
  <div id="two">2</div>
</div>
<div id="bottomzone">
  <div id="three">3</div>
  <div id="four">4</div>
</div>

Div one有一篇文章的介绍，div有一个广告，div三有实际文章，div有四个随机的东西（facebook feed，无论如何）。

在移动设备上，div需要按照从1到4的顺序显示。在桌面上，他们需要显示相同的内容，但需要在两列中首先水平排序。

到目前为止一切顺利。这是踢球者：

我们不知道div的高度 - 它们会随着每一页（甚至是广告页面）而变化。
div之间不能有任何垂直间隙。
我们不能使用Javascript（或者真的，真的，真的不想 - 我们知道我们可以用JS轻松地做到这一点）

如果您只是左右浮动，则会出现间隙：

<div id="topzone">
  <div id="one" style="float: left; height: 300px">1</div>
  <div id="two" style="float: right; height: 200px">2</div>
</div>
<div id="bottomzone">
  <div id="three" style="float: left; height: 100px">3</div>
  <div id="four" style="float: right; height: 300px">4</div>
</div>

尝试解决方案 CSS表不允许使用rowpans。解决方法have the empty div get overlayed或leave gaps。

Masonry CSS垂直命令div，因此移动设备会错误地将div 2和4降低到1和3以下。

我们最接近的是劫持溢出属性以显示第一个div下面的第三个div。这非常出色 - 直到我们尝试在页面中添加页脚。因为根据浏览器溢出没有高度，页脚覆盖了第三个div。

    <style type="text/css">
        #one {
            height: 300px;
            background-color: yellow;
        }

        #two {
            height: 200px;
            background-color: brown;
        }

        #three {
            background-color: blue; /* only shows in mobile, otherwise hidden behind #one */
        }
        #three-inner {
            height: 100px;
            border: 2px solid black;
        }
        #four {
            height: 300px;
            background-color: burlywood;
        }

        /* Non-mobile */
        @media all and (min-width: 740px) and (min-device-width: 740px), 
                       (max-device-width: 800px) and (min-width: 740px) {
            #one {
                float: left;
                width: 50%;
            }
            #two {
                float: right;
                width: 50%;
            }
            #three {
                height: 0px; /* turns into overflow */
                width: 50%; 
            }
            #three-inner {
                clear: left;
            }
            #four {
                float: right; 
                width: 50%;
                clear: right;
            }
        }

    </style>
    <div id="topzone">
        <div id="one">
            <p><strong>First block.</strong></p>
        </div>
        <div id="two">
            <strong>Second block</strong>
        </div>
        <div id="bottomzone">
            <div id="three">
                <div id="three-inner">
                    <p><strong>Third block.</strong></p>
                </div>
            </div>
            <div id="four">
                <p><strong>Fourth block.</strong></p>
            </div>
        </div>
    </div>

必须是一种在所有CSS中执行此操作的方法 - 告诉我有吗？

0 个答案:

没有答案

响应友好的流体CSS网格没有JS

0 个答案: