Как реализовать CSS через Js или jQuery?

Question

[Nikita Ok]

Есть некоторая структура html

<div id='glav'>
<div class='1'></div>
<div id='car-name'></div>
<div class='2'></div>
<div class='3'></div>
</div>

Нужно реализовать следующие:
Чтобы у div id='car-name' была задана ширина 100% минус 20px

Думаю такое можно реализовать через js или jQuery

Answer 1

[Алекс К]

Зачем через js?
Можно CSSом:

#car-name {
  margin:0 10px;
}

Comments

[Nikita Ok]

Это не то что мне нужно.
Нужно что бы у div id='car-name' была ширина равная div id='glav', а то есть 100%, но тогда другие блоки выйдут за предел div id='glav' (вниз). А минус 20 px это ширина всех div с классом 1,2,3. То если у div id='car-name' будет ширина 100%-20px, то все блоки поместятся в div id='glav'.

[Алекс К]

Никита Ок: Не совсем понятна общая картина. Можете описать необходимые размеры/положения всех дивов вашего примера?

[Nikita Ok]

Алексей Кауль:
В общем есть

/css/
.glav{
width: 100%;
padding: 5px 0px;
line-height: 28px;
height: 28px;
color: #545454;
background: #dedede;
}

div.1{
height: 30px;
line-height: 30px;
width: 80px;
}

div.2 и 3{
float: right;
width: 40px;
height: 38px;
color: #d0d0d0;
background: #545454;
line-height: 40px;
}
//

А у div id='car-name' должна быть вся оставшиеся ширина div'а id='glav', то есть 100%- 190px (190px это ширина все трех div с классами 1,2,3)

div id='car-name' находится между div class='1' (слева) div class='2' (справа)

PS это адаптивный шаблон

вот ссылка на картинку как есть и как хотелось было бы чтоб было
s7.hostingkartinok.com/uploads/images/2015/09/2d2c...

[Алекс К]

Никита Ок: Спасибо за картинку с подробностями. Это точно не тот случай, когда следует использовать JS. Делается CSSом так:

.glav {
position:relative;
width:100%;
height:40px;
}
.1, .2, .3, #car-name {
position:absolute;
top:0;
bottom:0;
}
.1 {
width:80px;
left:0;
}
.2 {
width:40px;
right:40px;
}
.3 {
width:40px;
right:0;
}
#car-name {
left:80px;
right:80px;
}

[Nikita Ok]

Алексей Кауль: СПАСИБО ОГРОМНОЕ!!!! Все отлично работает!!! Действительно js тут не нужен. Просто отличное решение! Реально очень помогли вы мне с этой проблемой!!! Давно не зал как разрешить эту проблему. Просто с position:absolute очень редко работаю вот и не не мог сообразить. Благодаря вам теперь на сайте будет лучше работать адаптивность под разные размеры экранов, а сейчас это важно.
И еще раз СПАСИБО за то, что уделили время и помогли!

[Алекс К]

Никита Ок: Рад был помочь :)

Answer 2

[LittleFatNinja]

var element = $('#car-name');

element.css({'width': element.width() - 20 + 'px'});

Comments

[Nikita Ok]

Возможно я может что то не так делаю не могли бы вы написать пример на jsfiddle.net.

[Nikita Ok]

Все разобрался спасибо!!!

[Nikita Ok]

Данное решение не возможно в сайтах которые адаптированы под все экрана.

Answer 3

[Кирилл]

Можно и на CSS реализовать, если нужна поддержка только современных браузеров.
caniuse.com/#feat=calc

Comments

[Nikita Ok]

Это решение я и изначальна взял за основу на сайте, но потом выяснилось что не у всех пользователей корректно отображается. Но спасибо за полезный сайт!