Расположение двух блоков div на одной строке

@back · Регистрация: 29.04.2015

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

Здравствуйте!
Понадобилось сделать так, чтобы два блока div находились на одном уровне.
Получилось сделать это с помощью float, вот только эти блоки прижимаются к самому краю, а мне нужно чтобы они были по-середине.
Подскажите как это реализовать.

@html-profi · 31.05.2012, 16:34

Объясни подробнее. Нужно чтобы они находились друг под другом что ли?

@back · 31.05.2012, 16:49

Вот примерно так.

Расположение двух блоков div на одной строке

На одной строке, рядом. Получилось так сделать с помощью float:left; для первого блока, но в этом случае оба блока прижимаются к левому краю, а мне нужно чтобы они находились в центре страницы.

@oshibka404 · 31.05.2012, 17:41

два варианта. Оба - извращения, но работать будут.

1) абсолютным позиционированием для обоих блоков задаём им положение так, чтобы они стояли где вам надо

2) помещаем оба блока в ещё один div, тем двум float:left, а div-контейнер выравниваем по центру.

@html-profi · 31.05.2012, 19:13

Если размеры блоков и родительского контейнера известны, то можно обоим блокам float: left; и используя margin выровнять блоки как надо

@newJS · 31.05.2012, 20:14

еще пара версий

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
/*ширина контейнера от ширины окна*/
.head {margin:0 auto; width:50%;}
/*бордюр для визуализации*/
.head div {border:2px solid red;}
/*ширина от 100% head!!!!!*/
.left {float:left; width:20%;}
/*ширина от 100% head!!!!!*/
.right {float:right; width:30%; text-align:right;}
/*отступы строго равны ширине, если есть бордюр, возможно его придётся учитывать. Ширина этого ДИВа это остаток от лево, право и бордюров*/
.center {margin-left:20%; margin-right:30%; text-align:center;}
</style>
<style type="text/css">
/*ширина контейнера от ширины окна*/
#main {margin:0 auto; width:50%;}
/*ширина от 100% main!!!!!*/
#first {float:left; width:50%;}
/*бордюр для визуализации*/
#main div {border:3px solid red; text-align:center;}
</style>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="text-align:center;">Как выровнять блок ДИВ по центру в котором 3 ДИВа</div>
<div class="head">
<div class="left">1</div>
<div class="right">2</div>
<div class="center">3</div>
</div>
 
<br><br>
 
<div style="text-align:center;">Два ДИВа фиксированной ширины расположить горизонтально и по центру.</div>
<div id="main">
<div id="first">1</div>
<div id="second">2</div>
</div>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@back 0 / 0 / 0 Регистрация: 29.04.2015 Сообщений: 1

	Расположение двух блоков div на одной строке 31.05.2012, 14:21. Показов 56548. Ответов 5 Метки нет (Все метки) Здравствуйте! Понадобилось сделать так, чтобы два блока div находились на одном уровне. Получилось сделать это с помощью float, вот только эти блоки прижимаются к самому краю, а мне нужно чтобы они были по-середине. Подскажите как это реализовать. 0

@html-profi 5 / 5 / 0 Регистрация: 25.11.2011 Сообщений: 56
	31.05.2012, 16:34
	Объясни подробнее. Нужно чтобы они находились друг под другом что ли? 1

@back 0 / 0 / 0 Регистрация: 29.04.2015 Сообщений: 1
	31.05.2012, 16:49
	Вот примерно так. На одной строке, рядом. Получилось так сделать с помощью float:left; для первого блока, но в этом случае оба блока прижимаются к левому краю, а мне нужно чтобы они находились в центре страницы. 0

@oshibka404 26 / 25 / 5 Регистрация: 25.04.2012 Сообщений: 73
	31.05.2012, 17:41
	два варианта. Оба - извращения, но работать будут. 1) абсолютным позиционированием для обоих блоков задаём им положение так, чтобы они стояли где вам надо 2) помещаем оба блока в ещё один div, тем двум float:left, а div-контейнер выравниваем по центру. 0

@html-profi 5 / 5 / 0 Регистрация: 25.11.2011 Сообщений: 56
	31.05.2012, 19:13
	Если размеры блоков и родительского контейнера известны, то можно обоим блокам float: left; и используя margin выровнять блоки как надо 0