JQuery и вычисляемая ширина блоков

Рейтинг: 0Ответов: 1Опубликовано: 17.12.2014

Добрый день.
Никак не могу сообразить, как сделать, чтобы посадить по горизонтали блоки. Есть html

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

и стили

.left,right {float:left;
width:50%;height:10px}
.center {float:left;width:30px;height:10px;}

Как JQuery сделать, чтобы правый и левый блок были "чуть меньше" 50% (за вычитом 30px центра), чтобы полностью влезали по ширине окна браузера на разных разрешениях?

Заранее спасибо.

jquery
Источник: Stack Overflow на русском

Ответы

▲ 1

Есть ещё такой вариант, самый обычный и простой, я бы сказал:

HTML (честно скопипастил у @Deonis):

<div class="wrapper">
  <div class="left">1</div>
  <div class="center">2</div>
  <div class="right">3</div>
</div>

CSS:

.wrapper {
    position: relative;
}
.wrapper div { 
    position: absolute; 
    text-align:center; 
}
.left { 
    background: #C7E3E4; 
    left: 0; 
    right: 50%; 
    margin-right: 100px; 
}
.center { 
    background: #E0D2C7; 
    width: 200px; 
    left: 50%; 
    margin-left: -100px; 
}
.right { 
    background: #ECD5DE; 
    left: 50%; 
    right: 0; 
    margin-left: 100px; 
}