Как сверстать этот элемент?

Question

[kamisarlapsha]

Привет! Как можно сверстать такой красный баннер, указал стрелочкой ? Баннера на этом месте будут разные, не только красные и они идут картинками. Сложность в том, по все элементы идут по сетке и соответственно все находятся в родительском контейнере .container и у него есть фиксированная ширина width: 1170px. А далее .container сжимается, вместе с экраном, то есть адаптивный. А этот баннер должен начинаться по линии с текстом

Менеджер свяжется с вами в течении 5 минут для подтверждения заказа

и растягиваться до конца правого края экрана. Заранее спасибо.

Answer 1

[dicem]

Была такая задача, кароч верстаешь сначала этот блок по сетке:

<div class="col-lg-5">
  <div class="redBlock">
    <p>Lorem Ipsum</p>
  </div>
</div>

.redBlock{
  background: red;
  color: white;
  padding: 20px;
  font: ...;
}

Далее, создавай внутри колонки col-lg-5 рядышком еще один блок и делай его абсолютным, родительский relative соответственно. Тут конечно придется сделать кое что под названием body overflow-x: hidden;

<div class="col-lg-5">
  <div class="redBlock">
    <p>Lorem Ipsum</p>
  </div>
  <div class="fakeBlock"></div>
</div>

body{ overflow-x: hidden }
.redBlock{
  background: red;
  color: white;
  padding: 20px;
  font: ...;
}
.fakeBlock{
  top: 0;
  left: 0;
  height: 100%;
  width: 99999px; // Тут кароч это все дело съедет к аллаху на 9999 пикселей и растянетсякак тебе надо без полосы прокрутки

Решал задачу примерно так, сам сейчас не тестил это, поэтому жду фидбэк, вроде у меня была еще не большая запара с высотой блока фейк блока, у тебя тоже должна быть.

Comments

[kamisarlapsha]

Да, сделал по твоему способу, только немного по другому.

<div class=block1">
  <div class="redBlock">
  </div>
  <div class="fakeBlock" style="backround: url(/1.png)"></div>
</div>

.redBlock {
width: 50px;
height: 100px;
}
.fakeBlock {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 99999px;
}

[kamisarlapsha]

Но, не уверен, насколько это правильно

[dicem]

kamisarlapsha, Если это работает на десктопах при различной ширине экрана, то все правильно. В мобильной версии предлагаю скрыть фейк блок