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

@Vasosel · Регистрация: 19.03.2015

Студворк — интернет-сервис помощи студентам

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

Просьба сильно не пинать, поиском пользовался, но везде предлагают случай с выравниванием ОДНОГО блока 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>

@msheal · 19.03.2015, 00:53

display:inline-block для всех трёх дивов или используйте float:left

@almaz1994 · 19.03.2015, 19:56

Делаем родительский слой.
Фон

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+описанные картинки) Сверстаю таким образом тебе)

@Taatshi · 25.03.2015, 00:32

Используйте для бэкграунда градиент.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	19.03.2015, 00:53
	display:inline-block для всех трёх дивов или используйте float:left 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	25.03.2015, 00:32
	Используйте для бэкграунда градиент. 0