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

Question

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

这是我的布局：

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

如果我将高度设置为border img

为了澄清：

domborder img介于main_sidebar和之间CTA_top_container.

1. main_side_image
2. main_heading_container
3. main_sidebar
4. 边框_img
5. CTA_top_container
6. CTA_Button_relative

结束思想：

我有一些想法，比如将边框 img 浮动为 div （或 susy's last）并将其设置background-image为 60% 宽度并定位在 div 的左侧，或者将绝对定位的 img 嵌套在相对容器内以将其轻推到左侧，但我害怕破坏布局的流动性（它在一个 susy 流体网格内）。

有什么想法吗？

Answer 1

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

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