Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
andnn
0 / 0 / 0
Регистрация: 01.11.2015
Сообщений: 4
1

3 блока в ряд с шириной относительно центрального элемента

01.11.2015, 11:00. Просмотров 338. Ответов 6
Метки css, div (Все метки)

Добрый день, может заголовок немного путаный. Сейчас скажу проще: пытаюсь прописать стиль для заголовка виджета. Нужно чтобы в конструкции было 3 блока, в центральном название, в двух крайних задний фон. Проблема в том что крайние блоки должны иметь ширину в зависимости от значения ширины центрального. Подскажите как это сделать корректнее. Примерная схема во вложении.

3 блока в ряд с шириной относительно центрального элемента
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.11.2015, 11:00
Ответы с готовыми решениями:

Выравнивание центрального блока относительно крайних
Есть 3 блока. Все разной фиксированной ширины. Крайние выравнены по...

Высота центрального блока
Привет мир! Суть в чем. Есть окно определенной высоты и длины. В нем divы:...

Трудности с шириной блока
Добрый день,не могу понять почему текст сообщения выходит за границы 700px...

Вёрстка: белое поле слева от центрального блока
Фон страницы серый, есть блок с высотой 100px и шириной 700px, установленный по...

При продолжении центрального блока - чтоб продолжались остальные.
Снизу скрин что получается...выводятся 20 новостей,и мне нужно чтобы они не...

6
palva
3100 / 2232 / 450
Регистрация: 08.06.2007
Сообщений: 8,132
Записей в блоге: 4
01.11.2015, 11:12 2
А разве не проще сделать один блок с фоном на всю ширину, а в нем по центру блок заголовка, у которого справа и слева прописана граница solid white 10px.
0
andnn
0 / 0 / 0
Регистрация: 01.11.2015
Сообщений: 4
01.11.2015, 17:07  [ТС] 3
По логике да, но проблема в том, что фон крайних блоков это линия заполненная градиентом (из коричневого в прозрачный)...
0
palva
3100 / 2232 / 450
Регистрация: 08.06.2007
Сообщений: 8,132
Записей в блоге: 4
01.11.2015, 19:28 4
А таблица с рядом из трех ячеек не подойдет?
0
andnn
0 / 0 / 0
Регистрация: 01.11.2015
Сообщений: 4
01.11.2015, 19:44  [ТС] 5
Есть тогда другой вопрос: как правильно задать стиль div, чтобы его ширина зависела от содержимого, т.е. чем короче текст в блоке, тем ширина меньше?
0
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
01.11.2015, 20:15 6
http://jsfiddle.net/Xck2A/2313/
Но работать будет только в новых браузерах, поддерживающих флекс.
HTML5
1
2
3
4
5
6
7
8
9
<div class="container">
   <div class="side">
   </div>
    <div class="center">
        <p>Текст какой</p>
    </div>
    <div class="side">
   </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.container{
    display:flex;
}
.side{
    background-color:#777;
    min-height:200px;
    flex-basis:200px;
    flex-grow:1;
}
.center{
   background-color:#c3c3c3; 
    min-height:200px;
}
0
andnn
0 / 0 / 0
Регистрация: 01.11.2015
Сообщений: 4
01.11.2015, 20:21  [ТС] 7
Ок, понял, спасибо большое!
0
01.11.2015, 20:21
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.11.2015, 20:21

Бэграунд для блока с заданной шириной
День добрый форумчане, есть разметка &lt;div class=&quot;column&quot;&gt; &lt;div...

Абсолютное выравнивание блока с динамической шириной
Как выровнить верхний блок по центру, если он абсолютно спозиционирован и если...

На мобильных устройствах ширина центрального блока уменьшается - подскажите решение
Здравствуйте. Столкнулся с такой проблемой: На стационарных компьютерах...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru