元素不并排（复杂网格）有 space，但表现得好像没有

Question

在使用最少的相对和绝对定位执行复杂布局时遇到问题。

这是我的布局：

我的所有元素都并排向左浮动，只有一个问题：边框 img 需要向下延伸到下一行。我怎样才能做到这一点，同时防止第二行中的元素（CTA 元素）下降到 border img?

的下边距以下

如果我设置 border img

的高度，会发生这种情况

澄清一下：

dom使得border img在main_sidebar和CTA_top_container.之间

1. main_side_image
2. main_heading_container
3. main_sidebar
4. border_img
5. CTA_top_container
6. CTA_Button_relative

结束语：

我有一些想法，比如像 div（或 susy 的 last）一样向右浮动边框 img，并将 background-image 设置为 60% 宽度并位于div 或将绝对定位的 img 嵌套在相对容器内以将其向左移动，但我担心会破坏布局的流动性（它位于 susy 流体网格内）。

有什么想法吗？

Answer 1

如果您将 border_img 浮动到右侧而不是左侧（用一些右边距将其推离边缘），其他所有内容都应该能够围绕它流动。

您可能还想使用包含更多列的网格。如果您总是不得不将列拆分为分数，那么它并不是真正适合这项工作的网格。