2

Очень схематичный рисунок:

img

У средней колонки может быть разная ширина (но ширина не должна занимать больше 80% ширины экрана), а 1-я и 3-я колонка должны заполнять все свободное пространство как по горизонтали, так и по вертикали. Я мучился с разметкой, но сделать этого не смог. Очень базовая разметка со стилями лежит на jsfiddle. Буду благодарен за помощь.

HTML

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

CSS

.left {
    height:100px;
    width:20px;
    background: red;
    float: left;
}
.center {
    width:50px;
    height: 100px;
    background: green;
    float: left;
}
.right {
    height:100px;
    width:20px;
    background: blue;
    float: left;
}
8
  • ну так и написать нужно все в процентах: jsfiddle.net/8qVPW/3
    – zhenyab
    9 июл 2013 в 10:00
  • А если ширина центрального контейнера не 80%? А, например 50%? Дело в том, чтоон может быть разной ширины. 80% - максимальна ширина.
    – anton_
    9 июл 2013 в 10:05
  • размер центрального блока зависит от контента? Я правильно понимаю? Или как это получается, что ширина его может варьировать? Это не поддается управлению?
    – zhenyab
    9 июл 2013 в 10:12
  • Да, центральный блок зависит от контента. И этим нельзя управлять (можно только указать максимальную ширину)
    – anton_
    9 июл 2013 в 10:27
  • Как решить поставленную задачу одними силами стилей не знаю. Знаю как сделать плавающий средний блок в зависимости от размеров боковых, но такой вариант - еще не сталкивался! Нужно подумать, вдруг чего надумаю! Интересная задачка :)
    – zhenyab
    9 июл 2013 в 11:16

3 ответа 3

2

Грубое исполнение, но отсюда уже можно куда-то двигаться: мышкой тырц

5
  • Спасибо за помощь, но я нашел средство сделать это на чистом CSS
    – anton_
    11 июл 2013 в 11:07
  • Если подходит такое решение, то конечно. Проблема состоит в боковых блоках. Вы пробовали внести в них контент?
    – zhenyab
    11 июл 2013 в 11:27
  • Я сейчас не за компьютером, но сейчас попробовал с айпэда внести контент. Вроде работает. Хотя конкретно в моей задаче в боковых колонках контента нет.
    – anton_
    11 июл 2013 в 11:31
  • Да, это меняет дело. В вопросе Вы это не указали!
    – zhenyab
    11 июл 2013 в 11:34
  • Извините. Бывает.
    – anton_
    11 июл 2013 в 11:35
2

Нашел решение. Лежит оно здесь - http://jsfiddle.net/T7M6f/. В решении мне помогла эта статья - http://www.artlebedev.ru/tools/technogrette/html/align-center/

2
  • Сделал Ваш комментарий ответом, подправьте. 11 июл 2013 в 11:51
  • Сделал. Спасибо.
    – anton_
    11 июл 2013 в 17:31
0

Как вариант разметить блоки и дать левому и правому - min-width:10%; max-width:30% а центральному блоку задать max-width:80% ; min-width:40% . Мне кажется это будет логично и оптимально

2
  • Сделал, открыл, получил вот это prntscr.com/1ee795
    – anton_
    9 июл 2013 в 11:46
  • И это не то, что Вы хотели сделать ?
    – handbat0
    9 июл 2013 в 17:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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