Элементы не расположены рядом (сложная сетка) Пространство есть, но действует так, как будто его нет

Возникли проблемы с выполнением сложного макета с минимальным использованием относительного и абсолютного позиционирования.

Вот мой макет:

введите здесь описание изображения

Все мои элементы плавают влево, сидя бок о бок, только с одной проблемой: граница img должна перетекать в следующую строку. Как я могу это сделать, не позволяя элементам во 2-й строке (элементы CTA) опускаться ниже нижнего поля border img?

Вот что произойдет, если я установлю высоту border img

Для уточнения:

Дом таков, что border 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 last) и установить background-image как ширину 60% и расположить слева от div или вложить img с абсолютным позиционированием внутри относительного контейнера, чтобы подтолкнуть его к левый, но я боюсь разрушить плавность макета (он находится внутри плавной сетки).

есть идеи?


person Andrew    schedule 04.06.2015    source источник
comment
Первая мысль - Вау! Поместите JsFiddle на этого плохого мальчика, потому что его довольно сложно расшифровать.   -  person technophobia    schedule 04.06.2015
comment
Я бы с удовольствием, но я не совсем уверен, как добавить внешние ресурсы. Я использую normalize, sass и susy. Вы знаете, где я могу найти ссылки на их ресурсы?   -  person Andrew    schedule 04.06.2015
comment
Вот их макет, который я сделал через Wix. Не знаю, поможет ли это вам визуализировать это. andrewmcswain.wix.com/intensivaotosite   -  person Andrew    schedule 04.06.2015


Ответы (1)


Если вы плаваете border_img справа, а не слева (с некоторым правым полем, чтобы оттолкнуть его от края), все остальное должно иметь возможность обтекать его.

Вы также можете использовать сетку с большим количеством столбцов. Если вам всегда приходится разбивать столбцы на дроби, это не совсем подходящая сетка для работы.

person Miriam Suzanne    schedule 04.06.2015
comment
Еще раз спасибо, Эрик. Я согласен с моей сеткой. Я знаю, что неправильно использую фреймворк. Исправление сетки входит в контрольный список! - person Andrew; 05.06.2015