Как сделать элемент разбитым на сетку и касание края браузера

Пожалуйста, обратитесь к изображению ниже. У меня есть сетка (с использованием Bourbon Neat). Первый розовый элемент подходит обычно по 5 столбцам, но зеленый элемент должен начинаться с 6-го столбца, но заканчивается вырываться из сетки и касаться края браузера. Я уверен, что это невозможно без использования javascript, но, надеюсь, я могу оказаться неправдой!Как сделать элемент разбитым на сетку и касание края браузера

Любые идеи, как это осуществить?

РЕДАКТИРОВАТЬ: Это необходимо для работы с максимальной шириной на внешнем контейнере!

Пример HTML:

<div class="container"> 
<div class="pink"></div> 
<div class="green"></div> 
</div>

Bourbon:

.container{ 
    @include outer-container(); 
} 
.pink{ 
    @include span-columns(5); 
} 
.green{ 
    @include span-columns(7); 
    // What to do here??? 
}

источник

2016-09-22 Chris

Это будет очень полезно, если вы сделаете jsfiddle.net –

Если это презентационный только и не содержащий контент затем ... Http: // StackOverflow. com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –

У меня есть решение. Это не самый красивый, но я считаю, что он вообще чтит систему Neat. На CodePen: https://codepen.io/alexbea/pen/LRxXpO.

Розовый и зеленый (фиолетовый и чирок в моем примере) в конечном итоге завертываются в свои контейнеры, которые выполняют работу по выравниванию с сеткой. Второй столбец разбивается с использованием отрицательного правого поля, равного отступу. Использование vw для прокладки позволяет в этом случае простоту согласованности. Возможно, вам потребуется настроить значение для вашего дела.

HTML

<div class="container"> 
<div class="first"><div class="pink"></div></div> 
<div class="second"><div class="green"></div></div> 
</div>

SCSS

.container { 
    @include outer-container(100%); 
    @include pad(2vw); 
} 

.first { @include span-columns(5); } 
.second { @include span-columns(7); } 

.pink, 
.green { height: 100px; } 

.pink { background-color: pink;} 
.green { 
    background-color: green; 
    margin-right: -2vw; 
}

источник

2016-09-22 23:22:39 alexbea

Спасибо за вход! Это работает, но не тогда, когда существует максимальная ширина для внешнего контейнера. Это настоящая проблема, с которой я столкнулся. – Chris

Достаточно честный. Это не было фактором, который вы упомянули в публикации. Как отметил Сохаиб Мохаммед, у вас будет намного больше успехов в получении хороших ответов, если вы предоставите рабочую демонстрацию своего проблемного кода. Одним из решений было бы использовать vw для заполнения вместо процента. Вы можете сделать это, как показано в моем обновленном ответе. – alexbea

Эй, если я использую margin-right: -12.06vw; Я получаю то, что хочу - спасибо! Я пытался создать скрипку, но не мог понять, как импортировать бурбон аккуратно. https://codepen.io/anon/pen/XjrvZE – Chris

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

Если вы намерены иметь переполненную часть 2-го столбца, используемого исключительно для целей проектирования, и она не будет содержать содержимого, вы можете сделать ее с использованием псевдоэлементов 2-го столбца: до или после после абсолютного позиционирования.

источник

2016-09-22 06:48:36

Но без сетки, как можно разместить розовый (и зеленый), чтобы они совпадали с остальная часть страницы (которая использует сетку)? – Chris

Вы можете использовать сетку использования для розового элемента, а затем абсолютно смещать зеленый цвет по ширине розового цвета + колонна. Это то, что вы имели ввиду? –

Как сделать элемент разбитым на сетку и касание края браузера

ответ

Смежные вопросы