2

Здравствуйте. В ощем возникла проблема с div`ами, парюсь уже несколько дней.

Сначала, что необходимо, затем чего получается и что нет.

Для background есть рисунок разделенный на 3 части для 3-х div`ов На всю эту композицию должен быть наложен текст ( на все 3, а не только на среднюю часть ) Левая и правая часть имеют фиксированные размеры, средняя должна расстягиваться по ширине текста.

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

Получется выстроить их в одну линию, получается наложить текст, а вот совместить одно с другим не выходит.

Если налаживаю текст на все три, то средний не растягивается, это и понятно, absolute выкидывает из общего потока. Если убрать div с текстом, а сам текст поместить в div id="center", то тогда текст естественно не ложится на два крайних.

В id=(left, right, center) прописанны только свойства для background.

<div style="position: relative;">
    <div style="position: absolute;">
         ТекстТекстТекстТекстТекстТекстТекстТекст
    </div>
    <div style="position: absolute;">
      <div id="left" ></div>
      <div id="right"></div>
      <div id="center"></div>
    </div>
</div>

Если есть решение только на css, помгите, если нет то отпишите, что это невозможно

1 ответ 1

2

Рабочий пример:

body {
  background: #ccc;
}
.dd {
  line-height: 348px;
  position: relative;
  display: inline-block;
  padding: 0 150px;
  font-size: 50px;
  white-space: nowrap;
}
.dd>span {
  position: relative;
  z-index: 1;
}
.dd:before {
  position: absolute;
  content: ' ';
  height: 348px;
  width: 324px;
  background: url("http://i.imgur.com/9DnegYW.png") left top;
  top: 0;
  left: 0;
}
.dd:after {
  position: absolute;
  content: ' ';
  height: 348px;
  width: 324px;
  background: url("http://i.imgur.com/2tQFf8E.png") right top;
  top: 0;
  right: 0;
}
.dd>i {
  background: url("http://i.imgur.com/V0OSUzF.png") repeat-x center 43%;
  height: 348px;
  position: absolute;
  top: 0;
  left: 324px;
  right: 324px;
}
<div class='dd'>
  <span>test test test test</span><i></i>
</div>
<div class='dd'>
  <span>test test test test test test test</span><i></i>
</div>

6
  • Спасибо за помощь, теперь все работает, но только когда подставляю свои картинки, то "средний фон" залазит на два крайних и получается вот так i.imgur.com/JmJITac.jpg
    – Sergey
    27 янв 2017 в 13:44
  • Сами картинки i.imgur.com/9DnegYW.png i.imgur.com/V0OSUzF.png i.imgur.com/2tQFf8E.png
    – Sergey
    27 янв 2017 в 13:50
  • @Sergey Я изменил пример, но он использует белый фон, прозрачность надо сохранить?
    – Crantisz
    27 янв 2017 в 14:02
  • Да, прозрачность необходима
    – Sergey
    27 янв 2017 в 18:39
  • @Sergey Тогда так
    – Crantisz
    27 янв 2017 в 19:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.