Выровнять блоки див по ширине

@Svetlana_123 · Регистрация: 22.05.2015

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

Добрый день, есть родитель определенной ширины, в нем три дива, не получается их расставить так, что бы один был прилеплен к правому краю родителя, второй к левому, а третий по центру.

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
  <header>
        <div class="block1">
            <div class="logo"><img src="img/logo.png"></div>
            <div class="top_menu">
                <div class="login">
                    <p>Log In</p>
                </div>
                <div class="sign">
                    <p>Sign Up</p>
                </div>
                <div class="menu">
                    <img src="img/menu.png">
                </div>
            </div>
            <div class="top_text">
                <p>Find your Favorite <span>recipes</span></p>
            </div>
            <div class="button">
                <p>get started</p>
            </div>
            <div class="bottom_text">
                <p>or send us your own recipes and <span><a href="#">get rewarded</a></span>!</p>
            </div>
        </div>
    </header>

css:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
header{
    width: 100%;
    height: 880px;
    background: url('img/top_fon.jpg') no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    webkit-background-size: cover;
    -o-background-size: cover;
}
.block1{
    width: 1180px;
    height: inherit;
    margin: 0 auto;
}
.logo{
    width: 68px;
    height: 57px;
    float: left;
    position: relative;
    top: 21px;
}
.logo img{
    width: 68px;
    height: 57px;
}
.top_menu{
    width: 183px;
    float: right;
    position: relative;
    top: 44px;
    text-align: center;
}
.login{
    cursor: pointer;
    display: inline-block;
    float: left;
}
.login p, .sign p{
    font-family: "Lato", sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
    word-spacing: 1px;
}
.sign{
    cursor: pointer;
    display: inline-block;
}
.menu{
    cursor: pointer;
    display: inline-block;
    float: right;
}
.top_text{
    width: 439px;
    position: relative;
    margin: 0 auto;
    top: 343px;
}

.......

@Julieta · 27.11.2015, 18:03

левый- float:left;
правый- float:right;
по центру: magrin 0 auto;

@Svetlana_123 · 27.11.2015, 18:12 **[ТС]**

если дописать в существующую верстку для среднего magrin 0 auto;, то ничего не меняется

@Julieta · 27.11.2015, 18:14

автору было лень отформатировать код, мне лень его разбирать. Тогда указать для среднего блока ширину

@GoDr · 27.11.2015, 18:18

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
36
37
38
39
40
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Для Svetlana_123</title>
    <style>
        .flex-container {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-align-content: stretch;
            -ms-flex-line-pack: stretch;
            align-content: stretch;
            -webkit-align-items: flex-start;
            -ms-flex-align: start;
            align-items: flex-start;
        }
 
        .flex-item {
            background: #00aaaa;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item">1111111111111111111</div>
    <div class="flex-item">2222222222222222222</div>
    <div class="flex-item">3333333333333333333</div>
</div>
</body>
</html>

Добавлено через 1 минуту
http://jsfiddle.net/2yrvqz1g/

@Svetlana_123 · 27.11.2015, 18:21 **[ТС]**

а без флексов как это можно решить?

@Glart · 27.11.2015, 18:23

Как вариант: https://jsfiddle.net/ej37629p/

HTML5
1
2
3
4
5
<div class="wrapper">
    <div class="left">Лево</div>
    <div class="center">Центр</div>
    <div class="right">Право</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
25
26
27
28
29
30
31
32
.wrapper {
    width:300px;
    background-color:silver;
    display:table;
}
.left {
    margin:0px;
    float:left;
     width:33%;
    display:table;
    background-color:green;
    color:white;
    text-align:center;
}
.right {
    margin:0px;
    float:left;
     width:33%;
    display:table;
    background-color:brown;
    color:white;
    text-align:center;
}
.center {
    float:left;
    margin:0px;
    width:34%;
    display:table;
    background-color:orange;
    color:white;
    text-align:center;
}

@Julieta · 27.11.2015, 18:24

Svetlana_123, я вам написала. Если блоки разной ширины

@Svetlana_123 · 27.11.2015, 18:27 **[ТС]**

Julieta, не работает такой вариант

@GoDr · 27.11.2015, 18:40

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

а без флексов как это можно решить?

А это принципиально, или какой-то браузер не понимает?

@Svetlana_123 · 27.11.2015, 18:40 **[ТС]**

Glart, не работает этот метод

@Svetlana_123 · 27.11.2015, 18:42 **[ТС]**

GoDr, стараюсь делать под все браеузеры и плюс знаю, что можно решить меньшим кол-вом кода, но как пока не понимаю

@GoDr · 27.11.2015, 18:44

я малость адаптировал код под древние браузеры.. Но всё современные вполне поймут это

HTML5
1
2
3
4
5
6
7
8
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-content: stretch;
            align-items: flex-start;
        }

И это ещё при том, что делается переназначение стилей по умолчанию

@Glart · 27.11.2015, 18:44

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

не работает этот метод

Я дал ссылку на пример, что там не работает?

@GoDr · 27.11.2015, 18:45

меньше кода не получится!!!!

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

GoDr, стараюсь делать под все браеузеры и плюс знаю

Ради бога, не далай это!!! Если ты ещё хочешь поддерживать 8-ю версию Осла, ну только исключительно для преподавателя или для заказчика, у которого Windows 98

@Svetlana_123 · 27.11.2015, 18:48 **[ТС]**

GoDr, с 9 делаю )

Добавлено через 1 минуту
Glart, при переносе в мою верстку не получается такого результата

@GoDr · 27.11.2015, 18:49

ну так проверь.. работает?
Кстати, Осла уж Майкрософт обновляет практически без ведома пользователя.. Так что работать будет.. ДА и не пользуется им уже никто давно...

Не по теме:

PS
- Зачем нужен Internet Explorer?
- Чтобы скачать любой другой браузер!

@Svetlana_123 · 27.11.2015, 19:44 **[ТС]**

GoDr, в сафари 5.1.4 не работает
флексы точно не годятся

@Glart · 27.11.2015, 19:48

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

при переносе в мою верстку не получается такого результата

Но ведь работает, а то что не получается перенести это уже другой вопрос.

@Svetlana_123 · 27.11.2015, 19:50 **[ТС]**

Glart, в примере работает, а почему в моей верстке не работает не пойму

Новые блоги и статьи Все статьи Все блоги /
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 через установщик. . . .

@Julieta 6 / 6 / 1 Регистрация: 19.12.2013 Сообщений: 160
	27.11.2015, 18:03
	левый- float:left; правый- float:right; по центру: magrin 0 auto; 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 18:12 [ТС]
	если дописать в существующую верстку для среднего magrin 0 auto;, то ничего не меняется 0

@Julieta 6 / 6 / 1 Регистрация: 19.12.2013 Сообщений: 160
	27.11.2015, 18:14
	автору было лень отформатировать код, мне лень его разбирать. Тогда указать для среднего блока ширину 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 18:21 [ТС]
	а без флексов как это можно решить? 0

@Julieta 6 / 6 / 1 Регистрация: 19.12.2013 Сообщений: 160
	27.11.2015, 18:24
	Svetlana_123, я вам написала. Если блоки разной ширины 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 18:27 [ТС]
	Julieta, не работает такой вариант 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 18:40 [ТС]
	Glart, не работает этот метод 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 18:42 [ТС]
	GoDr, стараюсь делать под все браеузеры и плюс знаю, что можно решить меньшим кол-вом кода, но как пока не понимаю 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 18:48 [ТС]
	GoDr, с 9 делаю ) Добавлено через 1 минуту Glart, при переносе в мою верстку не получается такого результата 0

@GoDr 90 / 79 / 33 Регистрация: 17.08.2015 Сообщений: 512 Записей в блоге: 1
	27.11.2015, 18:49
	ну так проверь.. работает? Кстати, Осла уж Майкрософт обновляет практически без ведома пользователя.. Так что работать будет.. ДА и не пользуется им уже никто давно... Не по теме: PS - Зачем нужен Internet Explorer? - Чтобы скачать любой другой браузер! 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 19:44 [ТС]
	GoDr, в сафари 5.1.4 не работает флексы точно не годятся 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	27.11.2015, 19:50 [ТС]
	Glart, в примере работает, а почему в моей верстке не работает не пойму 0