Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
Vasosel
0 / 0 / 0
Регистрация: 19.03.2015
Сообщений: 3
1

Выравнивание фиксированного блока по ширине + блоки автоматической ширины слева и справа

19.03.2015, 00:35. Просмотров 1114. Ответов 3
Метки нет (Все метки)

Здравствуйте.

Просьба сильно не пинать, поиском пользовался, но везде предлагают случай с выравниванием ОДНОГО блока c помощью margin: 0 auto;

Задача: на странице выровнять по центру (по горизонтали) блок фиксированной длины-ширины (DIV). Проблема в том, что справа и слева от него должен быть фон разного цвета. Если делаю это двумя дополнительными DIV, то сталкиваюсь с проблемой выравнивания.


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

index.html
HTML5
1
2
3
4
5
6
7
<style>
.hrline_left {background: #000;height:9px;}
.hrline_right {background: #FFF;height:9px;}
.hrline_center {background: #7F7F7F; width:960px;height:9px;}
</style>
 
<div class="hrline_left"></div><div class="hrline_center"></div><div class="hrline_right"></div>
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.03.2015, 00:35
Ответы с готовыми решениями:

Автоматическое выравнивание <div> по ширине не зная его ширины
Привет, Есть проблема с выравниванием &lt;div&gt;. Размер &lt;div&gt; нельзя задать статически или в...

Обрезать картинку слева и справа при уменьшении ширины экрана
Картинка выравнивается по центру экрана. Уменьшаю ширину экрана справа налево так, что она...

Выглядывание блока справа на 10px независимо от его ширины
суть задачи на картинке

Размещение контента справа и слева от блока
Доброго времени суток! Нужна помощь. Есть вот такая страничка: &lt;!DOCTYPE html&gt; &lt;html&gt;...

Как с css сделать высоту блока равной его ширине при том что точное значение ширины не известно?
Ширина блока задана как &quot;width: 100%&quot;, то есть 100% от родительского блока. Как задать высоту блока...

3
msheal
703 / 305 / 189
Регистрация: 05.03.2015
Сообщений: 818
19.03.2015, 00:53 2
display:inline-block для всех трёх дивов или используйте float:left
0
almaz1994
33 / 33 / 15
Регистрация: 07.05.2014
Сообщений: 313
19.03.2015, 19:56 3
Делаем родительский слой.
Фон
CSS
1
background: url('fon.gif') center top no-repeat;
Затем фон растягиваем на весь блок. css в помощь.
Если изначально фон по ширине сделать пикселей на 1400, и высотой на 1-5px, то повторяясь по высоте он обеспечит тебе два разных цвета слева и справа.
Если разделение нужно не ровное,а например, наискось, тогда внутрь суем еще один блок, шириной 100%;
Для этого блока фоном вставляем картинку, которая и есть этой косой чертой.
CSS
1
background: url(fon1.gif') center top no-repeat;
Теперь уже внутри этого блока как обычно ставишь два нужных блока самым обычным образом)
Вроде объяснил) если не понял - отправь html+css+описанные картинки) Сверстаю таким образом тебе)
0
Taatshi
Администратор
11746 / 5102 / 257
Регистрация: 05.04.2011
Сообщений: 13,845
Записей в блоге: 2
25.03.2015, 00:32 4
Используйте для бэкграунда градиент.
0
25.03.2015, 00:32
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.03.2015, 00:32

Выравнивание текста по ширине (справа и слева)
Доброго времени суток! Возникла трудность в создании программы. Нужно сделать так, чтобы текст...

Рекламные блоки слева и справа
Доброго времени дня или вечера, я в этом деле совсем новичок, только осваиваю по-тихоньку. так...

Как делается правильно выравнивание слева и справа
А то я постоянно пробелами сдвигаю. Уверен, что есть более легкий и правильный способ. Подскажите...


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

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

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