css - 浮动框对齐问题

Question

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

这是它的样子：

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

• 我不想将课程应用于方框 3
• 我无法增加标题的宽度，因为它位于框 4 容器中
• 我希望我可以用 CSS 定位“之前的元素”，但这似乎不可能
• 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。那是你想要达到的吗？