0

Добрый день.
Никак не могу сообразить, как сделать, чтобы посадить по горизонтали блоки. Есть 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 центра), чтобы полностью влезали по ширине окна браузера на разных разрешениях?

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

3 ответа 3

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; 
}
0

CSS:

.left {float:left; width: 50%; padding-right: -25px; height:10px} 
.right {float:right; width: 50%;height:10px} 
.center {width:30px;height:10px;margin: 0 auto}
.inside-left{
    margin-right: 15px;
}
.inside-right{
    margin-left: 15px;
}

HTML:

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

JSFIDDLE:

http://jsfiddle.net/t7zL6cxj/

2
  • Спасибо. Даже без JQuery. Для себя немного переделал, ибо сваливалось все равно: .left {float:left; width: 50%; padding-left: -30px; height:10px} Кстати, если мне не изменяет память отрицательных padding быть не может :)
    – Romancho
    Commented 17 дек. 2014 в 12:48
  • а он и не нужен: случайно скопировал эксперимент
    – knes
    Commented 17 дек. 2014 в 13:44
0

Если есть обертка или можно её добавить, то можно сделать так:

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

CSS

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.wrapper > div {
    display: table-cell;
    height: 10px;
}
.center {
    width: 30px;
}
3
  • Мне кажется, что при таком варианте левая и правая колонки будут зависеть от контента и могут легко стать 70% и 30%, например.
    – MasterAlex
    Commented 17 дек. 2014 в 13:08
  • @MasterAlex, нет, тут ключевое свойство table-layout: fixed;. [Пример][1] [1]:jsfiddle.net/6vyxqnu9/1
    – Deonis
    Commented 17 дек. 2014 в 13:56
  • хм, а в примере пишут 50% зачем-то, интересная штука, пригодится в таблицах админки сайта
    – MasterAlex
    Commented 17 дек. 2014 в 14:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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