浮动框对齐问题

Question

我正在构建一个响应式布局，在特定屏幕尺寸的网格中有框。

这就是它的样子：

我要做的是在框3中添加一些上边距以将其向下推以产生所需的效果：

• 我不想将课程应用于方框3
• 我无法增加标题的宽度，因为它位于框4容器
中
• 我希望我可以使用CSS定位“之前的元素”但doesn't seem possible
• 这些框目前已浮动，由于响应间距问题，我无法使用inline-block

Answer 1

使用具有您的限制的纯CSS无法做到这一点。但是，您可以使用jQuery：

演示：http://jsfiddle.net/SO_AMK/DKkLh/

jQuery：

$("section").each(function() {
    if ($(this).children("h1").length > 0) {
        $(this).prev().css("margin-top", ($(this).children("h1").height() + 5));
        // +5 for the margin on sections
    }
});​

Answer 2

将标题和div no4放在同一个div / section中，您将获得所需的效果。这是jfiddle。 那是你想要实现的目标吗？