通过CSS进行流体布局块定位，无需任何高度知识，即可实现响应性布局站点

我在纸上规划了我的站点，作为一个响应性的布局站点，并尝试构建非常高层次的布局

对于320>=视口>=0部分，它似乎与预期的一样正常

但是，我无法实现480>=视口>=321的目标

我所做的链接是：

我不知道潜水艇的高度，它们要视情况而定 我知道div宽度的%值。我用CSS代码写的。未明确写入的宽度为100%。 我不想改变HTML中div的顺序，因为我已经通过这种方式很容易地实现了CSS的320>=视口部分。但是，如果存在一个解决方案，它改变了顺序，但同时实现了两种视口场景，那么它也是受欢迎的。 我的要求：

注：下面的数字在数字下面缩写为B。它们在代码中是不言自明的

第1行»B1-B4-B5这些将跨越100%

第2行»B6跨度100%

第3行»B3-B7 B3比B7短。2个div加在一起将跨越100%

第4行»B8跨越B7的100%

第5行»B9跨越B7的100%

第6行»B10跨越B7的100%

我希望我需要的是一个具有给定输入的纯CSS解决方案

你能帮帮我吗

问候

更新

我加了一个模型。我在/*320>=viewport>=0*/

我想为/*480>=视口>=321实现场景2*/

块名称为：

1-logo 2-移动切换菜单 三主菜单 4-二级菜单 5-社交媒体链接 6-搜索框 7-内容 8-最近的评论 9-存档中的内容 10英尺 更新2：在场景1的实体模型图像中，3-4-5表示3在顶部，4在第3下方，5在第4下方。正如我所说，这是我的默认风格，我已经实现了场景1

更新3：这个问题的第一个答案已经到了。我添加了彩色的jsbin图像。第一排为B1-B3-B4，但应为B1-B4-B5。参考模型。此外，区块7应位于B3的右侧

试试这个

您必须使用javascript来实际移动主菜单

$(window).resize(resize);
resize();

function resize()
{
    console.log($(window).width());
    if($(window).width() <= 480 && $(window).width() >= 321)
    {
        $("#id3").insertAfter("#id6");
    }
    else
    {
        $("#id3").insertBefore("#id4");
    }
}

使用内联块来创建合谋

这就是它看起来的样子：

---

我不明白这个问题。你能更好地解释一下你到底想达到什么目的吗？你想计算高度吗？您还不断提到span，但您的标记中没有span。不，我不尝试计算高度，它们将是动态的逐页。如果我知道高度，至少我可以使用绝对定位。这很好，很容易，但是身高是不知道的。如果你能做一个你想要达到的目标和你得到的目标的模型，那会有帮助的。@AndyM希望我添加的内容能让我更清楚。对不起，我的英语有问题。我想我无法用言语表达。我没有成功的是在我写的链接中。感谢您的努力，但是您的解决方案与我在模拟模型中定义的非常不同。为什么？在我看来与你的图像一模一样。我将从你的jsbin url中看到的图像添加到我的问题中作为更新3。我也写了不同点，这正是我所得到的，第一行是B1-B4-B5，就像你问的，B3在B7-B10的左边，B6在B3和B5之间。