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

@Jenya7771 · Регистрация: 30.11.2015

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

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 смещён вниз на высоту блока!

@siyanie · 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;
}

@Jenya7771 · 30.11.2015, 21:12 **[ТС]**

siyanie, Мне нужно горизонтально!)

Добавлено через 1 минуту
siyanie, А подожди, я не растянул!))

@siyanie · 30.11.2015, 21:12

Jenya7771,

@Jenya7771 · 30.11.2015, 21:16 **[ТС]**

siyanie, Не знаю по какой причине, но не работает(

@siyanie · 30.11.2015, 21:22

Jenya7771, Подробнее описывай, что именно не работает? Мы же не экстрасенсы

Скрин сделай или опиши.

@Jenya7771 · 30.11.2015, 21:24 **[ТС]**

siyanie, А стоп, всё сделал спасибо!)

@GoDr · 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 всё же уходит в лето.. Слишком много с ним проблем

@siyanie · 02.12.2015, 15:45

GoDr, Годную ссылку на flexbox можно?

@GoDr · 02.12.2015, 15:48

Сообщение от siyanie

GoDr, Годную ссылку на flexbox можно?

то есть? поясни..

@siyanie · 02.12.2015, 15:54

GoDr, В современном примере использовался flexbox, может у вас есть хорошая ссылка на эту тему?

@GoDr · 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/

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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 и т. д. Сборка примера Скачайте. . .

@Jenya7771 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

@Jenya7771 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

@Jenya7771 0 / 0 / 0 Регистрация: 30.11.2015 Сообщений: 5
	30.11.2015, 21:24 [ТС]
	siyanie, А стоп, всё сделал спасибо!) 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	02.12.2015, 15:45
	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