как растянуть картинку на всю доступную ширину блока?

[F4rr3LL]

Добрый день,учусь верстать с псд,выбрал себе макет,и столкнулся с проблемой.

http://joxi.ru/D2PKwp0HdlbGNm
есть блок,внутри 3 столбца,у каждого есть заголовок.
перед заголовком иконка с синим квадратом,после заголовка иконка с пунктиром.
пытался сделать все это при помощи псевдоэлементов before и after.

<div class="about">    <div class="row">        <div class="col-md-4 about">            <p>services</p>        </div>        <div class="col-md-4 about">            <p>our tearms</p>        </div>        <div class="col-md-4 about">            <p>27/7/365 support</p>        </div>    </div></div>

.about p {    color: #7d7d7d;    font-family: "Oswald";    font-size: 12px;    text-transform: uppercase;    white-space: nowrap;}.about p:before {    content: "";    display: block;    background: url("img/Square.png") no-repeat;    width: 15px;    height: 15px;    float: left;    margin-right: 5px;}.about p:after {    content: "";    display: block;    background: url("img/Title-pattern.png") no-repeat;    width: 100%;    height: 15px;    float: right;    margin-right: 5px;}

в итоге слева все нормально,а картинка которая :after отображается под текстом

 

ttp://joxi.ru/krDLvy0F0Wn8lr
подскажите как сделать чтобы картинка справа растягивалась на всю оставшуюся ширину колонки?

[alex_web64]

https://jsfiddle.net/rkc04x1d/1/

[Launder]

Выложите код, пожалуйста, сюда или в другую песочницу.

[Int]

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

[F4rr3LL]

Выложите код, пожалуйста, сюда или в другую песочницу.

я на бутстрапе делал,не совсем понял как подключить его в песочнице,выложу архив с псд и тем что я "наваял" =)

https://yadi.sk/d/B7Vz8SGdq6XLo

[by chris]

 

Выложите код, пожалуйста, сюда или в другую песочницу.

я на бутстрапе делал,не совсем понял как подключить его в песочнице,выложу архив с псд и тем что я "наваял" =)

https://yadi.sk/d/B7Vz8SGdq6XLo

 

Слева

https://jsfiddle.net/yb5tgnn2/

[WhatIsHTML]

p:after занимает 100% ширины, поэтому сползает вниз

[F4rr3LL]

 

 

Выложите код, пожалуйста, сюда или в другую песочницу.

я на бутстрапе делал,не совсем понял как подключить его в песочнице,выложу архив с псд и тем что я "наваял" =)

https://yadi.sk/d/B7Vz8SGdq6XLo

 

Слева

https://jsfiddle.net/yb5tgnn2/

 

а картинки-иконки как?

[WhatIsHTML]

Можно закинуть на какой-то хостинг картинок и в код вставить прямую ссылку на картинку.

[F4rr3LL]

p:after занимает 100% ширины, поэтому сползает вниз

а как сделать чтоб занимало всю доступную ширину?там прост 2 блока,и заголовок у каждого разной ширины,и нужно чтобы картинка заняла все остальное место,и не сползла никуда,да и в макете почти все заголовки так оформлены,по этому в ручную для каждого заголовка ширину этой картинки задавать не вариант,мне в принципе нет жизненной необходимости это знать,но для общего познания всеже интересно)

поднял кароч на локалхосте)

http://178.151.45.122

[F4rr3LL]

чето оно там совсем печально выглядит,извиняюсь за мусор в css прост пробовал кучу вариантов)

https://jsfiddle.net/yb5tgnn2/1/

[WhatIsHTML]

а где картинка , которая идет после? p:after

P.S. Меня вопрос поставил в тупик. Может завтра соображу, а выше писали о флексе. Я не знаю, что это за способ, но наверное поможет)

P.P.S Поищите flexbox css. Вот тут что-то о нем пишется http://html5.by/blog/flexbox/

Edited March 12, 2016 by WhatIsHTML

[WhatIsHTML]

Еще как вариант,но флексом получше https://jsfiddle.net/8bb3wh6L/1/

Edited March 12, 2016 by WhatIsHTML

[F4rr3LL]

https://jsfiddle.net/rkc04x1d/1/

Спасибо огромное