Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/21: Рейтинг темы: голосов - 21, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 30.11.2015
Сообщений: 5

Как разместить 3 блока в одну линии горизонтально?

30.11.2015, 20:45. Показов 4540. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как разместить 3 блока в одну линии горизонтально?
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    .content-1{
        width:900px;
        margin:10px 40px 0 40px;
        border:solid 1px #fff;
    }
    .bl-1 {
        border: solid 1px #000;
        width: 290px;
        height:290px;
        float:left;
    }
.bl-2{
    margin-left: 300px;
        border: solid 1px #000;
        width: 290px;
        height:290px;
}
.bl-3{
        border: solid 1px #000;
        width: 290px;
        height:290px;
        margin-left:595;
}
3 блока расположены в блоке content-1
В таком варианте кода 2 блока горизонтально, а 3 смещён вниз на высоту блока!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.11.2015, 20:45
Ответы с готовыми решениями:

Разместить два блока горизонтально
Добрый вечер. Есть два блока с сылками как на скрине. Подскажите, как разместить второй блок горизонтально. Спасибо. ...

Как разместить два блока в одну линию
Столкнулся с непонятной ситуацией: Необходимо, чтобы два блока были размещены в линию. В первом - текст. Во втором - фоновая картинка, на...

Не получается разместить два блока в одну строку
Создан блок на 100% ширины экрана в нем у меня есть блок, который я располагаю по центру. В нем я создал два блока с 70% и 30% ширины от...

11
 Аватар для siyanie
13 / 13 / 7
Регистрация: 21.11.2015
Сообщений: 85
30.11.2015, 21:04
http://jsfiddle.net/cs0r8135/
Оно?
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="content1">
    <div class="bl-1">
    </div>
    
    <div class="bl-2">
    </div>
    
    <div class="bl-3">
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.content-1{
        width:900px;
        margin:10px 40px 0 40px;
        border:solid 1px #fff;
    }
    .bl-1 {
        border: solid 1px #000;
        width: 290px;
        height:290px;
        float:left;
    }
.bl-2{
        border: solid 1px #000;
        width: 290px;
        height:290px;
        float: left;
}
.bl-3{
        border: solid 1px #000;
        width: 290px;
        height:290px;
        margin-left:595;
        float: left;
}
0
0 / 0 / 0
Регистрация: 30.11.2015
Сообщений: 5
30.11.2015, 21:12  [ТС]
siyanie, Мне нужно горизонтально!)

Добавлено через 1 минуту
siyanie, А подожди, я не растянул!))
0
 Аватар для siyanie
13 / 13 / 7
Регистрация: 21.11.2015
Сообщений: 85
30.11.2015, 21:12
Jenya7771,
0
0 / 0 / 0
Регистрация: 30.11.2015
Сообщений: 5
30.11.2015, 21:16  [ТС]
siyanie, Не знаю по какой причине, но не работает(
0
 Аватар для siyanie
13 / 13 / 7
Регистрация: 21.11.2015
Сообщений: 85
30.11.2015, 21:22
Jenya7771, Подробнее описывай, что именно не работает? Мы же не экстрасенсы Скрин сделай или опиши.
0
0 / 0 / 0
Регистрация: 30.11.2015
Сообщений: 5
30.11.2015, 21:24  [ТС]
siyanie, А стоп, всё сделал спасибо!)
0
 Аватар для GoDr
90 / 79 / 33
Регистрация: 17.08.2015
Сообщений: 512
Записей в блоге: 1
01.12.2015, 09:43
Как вариант
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content-1 {
            width: 900px;
            margin: 10px 40px 0 40px;
            border: solid 1px #fff;
        }
 
        .content-1 > div {
            border: solid 1px #000;
            width: 290px;
            height: 290px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="content-1">
    <div class="bl-1"></div>
 
    <div class="bl-2"></div>
 
    <div class="bl-3"></div>
</div>
</body>
</html>
Добавлено через 2 минуты
Ещё один современный вариант
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content-1 {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-content: stretch;
            
            width: 900px;
            margin: 10px 40px 0 40px;
            border: solid 1px #fff;
        }
 
        .content-1 > div {
            border: solid 1px #000;
            width: 290px;
            height: 290px;
        }
 </style>
</head>
<body>
<div class="content-1">
    <div class="bl-1"></div>
 
    <div class="bl-2"></div>
 
    <div class="bl-3"></div>
</div>
</body>
</html>
Добавлено через 1 минуту
PS
float всё же уходит в лето.. Слишком много с ним проблем
0
 Аватар для siyanie
13 / 13 / 7
Регистрация: 21.11.2015
Сообщений: 85
02.12.2015, 15:45
GoDr, Годную ссылку на flexbox можно?
0
 Аватар для GoDr
90 / 79 / 33
Регистрация: 17.08.2015
Сообщений: 512
Записей в блоге: 1
02.12.2015, 15:48
Цитата Сообщение от siyanie Посмотреть сообщение
GoDr, Годную ссылку на flexbox можно?
то есть? поясни..
0
 Аватар для siyanie
13 / 13 / 7
Регистрация: 21.11.2015
Сообщений: 85
02.12.2015, 15:54
GoDr, В современном примере использовался flexbox, может у вас есть хорошая ссылка на эту тему?
0
 Аватар для GoDr
90 / 79 / 33
Регистрация: 17.08.2015
Сообщений: 512
Записей в блоге: 1
02.12.2015, 16:01
а ты вон в каком смысле
Ну статей много, но лучше спецификации никто не скажет Там на инглишь, но всё в картинках и очень всё понятно..
http://www.w3.org/TR/css-flexbox/

Можно ещё тут посмотреть, тоже достаточно понятно
http://html5book.ru/css3-flexbox/

есть ещё готовые генераторы, иногда очень удобно
http://the-echoplex.net/flexyboxes/
http://css3gen.com/css3-flexbox/
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
02.12.2015, 16:01
Помогаю со студенческими работами здесь

Как разместить фотографии в HTML горизонтально?
Здравствуйте! Прошу помощи, на сайте HTML нужно разместить две фотографии горизонтально, рядом с друг другом.. Что не делаю,...

как разместить горизонтально виджеты для соц. сетей
Доброго времени суток! У нас имеется 5 виджетов соц.сетей. А именно контакт, одноклассники, твиттер, мой мир и фейсбук. Как эти виджеты...

Не получается разместить список горизонтально
Сайт Wordpress Woocommerce В шаблоне по умолчанию идет отображение категорий в столбец, при чем, категория занимала всю ширину...

Разместить кнопки горизонтально внутри ячейки таблицы
Есть таблица в одной из ячееек &lt;td&gt;&lt;/td&gt; я написал вот такой вот код и получается время или он нормально выглядит и не работает скрипт или...

Горизонтально разместить блок новостей под меню
Всем привет. Удалось сделать с помощью margin и clear: both, но при изменении масштаба блок то выше, то ниже. В зависимости от...


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

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Киев стоит - украинская песня
zorxor 28.01.2026
wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка 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 и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru