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

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

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

CSS

    .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

<div class="content1">
    <div class="bl-1">
    </div>
    
    <div class="bl-2">
    </div>
    
    <div class="bl-3">
    </div>
</div>

CSS

.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

<!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

<!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/

@Jenya7771 0 / 0 / 0 Регистрация: 30.11.2015 Сообщений: 5
	30.11.2015, 21:12 [ТС]	3
	siyanie, Мне нужно горизонтально!) Добавлено через 1 минуту siyanie, А подожди, я не растянул!)) 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	30.11.2015, 21:12	4
	Jenya7771, 0

@Jenya7771 0 / 0 / 0 Регистрация: 30.11.2015 Сообщений: 5
	30.11.2015, 21:16 [ТС]	5
	siyanie, Не знаю по какой причине, но не работает( 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	30.11.2015, 21:22	6
	Jenya7771, Подробнее описывай, что именно не работает? Мы же не экстрасенсы Скрин сделай или опиши. 0

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

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	02.12.2015, 15:45	9
	GoDr, Годную ссылку на flexbox можно? 0

@GoDr 90 / 79 / 33 Регистрация: 17.08.2015 Сообщений: 512 Записей в блоге: 1
	02.12.2015, 15:48	10
	Сообщение от siyanie GoDr, Годную ссылку на flexbox можно? то есть? поясни.. 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	02.12.2015, 15:54	11
	GoDr, В современном примере использовался flexbox, может у вас есть хорошая ссылка на эту тему? 0

@GoDr 90 / 79 / 33 Регистрация: 17.08.2015 Сообщений: 512 Записей в блоге: 1
	02.12.2015, 16:01	12
	а ты вон в каком смысле Ну статей много, но лучше спецификации никто не скажет Там на инглишь, но всё в картинках и очень всё понятно.. http://www.w3.org/TR/css-flexbox/ Можно ещё тут посмотреть, тоже достаточно понятно http://html5book.ru/css3-flexbox/ есть ещё готовые генераторы, иногда очень удобно http://the-echoplex.net/flexyboxes/ http://css3gen.com/css3-flexbox/ 1