不并排坐着的元素（复杂网格）有空间，但好像没有

Question

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

这是我的布局：

我的所有元素都是左右并排放置，只有一个问题：边框img需要流入下一行。我怎样才能防止第2行中的元素（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

结束思路：

我有一些想法，比如将边框img作为div（或者是susy的last）并将background-image设置为60％宽度并位于div的左侧或嵌套绝对定位img在一个相对的容器里面把它推到左边，但我害怕破坏布局的流动性（它在一个可疑的流体网格内）。

有什么想法吗？

Answer 1

如果你向右移动border_img而不是向左移动（有一些右边距将其推离边缘），其他一切都应该能够绕过它。

您可能还想使用包含更多列的网格。如果你总是不得不将列拆分成分数，那么这对于这项工作来说并不是正确的网格。