позиционирование div

488

29 января 2017, 14:25

Здравствуйте. В ощем возникла проблема с 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, помгите, если нет то отпишите, что это невозможно

Answer 1

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

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>