Не получается растянуть блоки вниз синхронно(одинаково)

@adisen · Регистрация: 26.07.2018

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

Код:

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
#main{
    border:5px solid black;
}
 
#header{
    border:2px solid black;
    background: maroon;
    height:130px;
}
 
#sidebar-left{
    border:2px solid black;
    background: maroon;
    height:100px;
    width:20%;
    float:left;
}
 
#sidebar-right{
    border:2px solid black;
    background: maroon;
    height:100px;
    width:20%;
    float:right;
}
 
#content{
    margin:0 auto;
    width:60%;
    border:2px solid black;
    background: grey;
    height:100px;
 
}
 
#footer{
    border:2px solid black;
    text-align:center;
    background: yellow;
    height:100px;
}

Хотелось бы чтобы блоки 2222-4444-3333 растягивались одинаково не зависимо в каком блоке текст превышает длину блока.
Может кто помочь?

@adisen · 26.07.2018, 12:35 **[ТС]**

Вот фото.

@Academik · 26.07.2018, 14:03

adisen, как вариант можно использовать table-cell https://jsfiddle.net/w9Ljqor7/

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="main">
  <div id="header"></div>
    <div id="row">
      <div id="sidebar-left"></div>
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor condimentum tortor eu laoreet. Duis mi augue, tincidunt et pharetra non, vulputate sed tortor. Vestibulum odio tellus, malesuada sit amet sagittis eu, egestas at est. Curabitur nec ante ornare enim tincidunt gravida. In consectetur sapien sem, vel feugiat sem laoreet ac. Vivamus a ligula at est aliquam cursus. Cras accumsan accumsan elit, vitae luctus quam varius eu. </p>
      </div>
      <div id="sidebar-right"></div>
    </div>
  <div id="footer"></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
33
34
35
36
37
38
39
40
41
42
43
44
#main{
border:5px solid black;
}
 
#header{
border:2px solid black;
background: maroon;
height:130px;
}
 
#row{
width: 100%; 
display: table;
}
 
#sidebar-left, #sidebar-right, #content{
display: table-cell;
}
 
#sidebar-left{
border:2px solid black;
background: maroon;
width:20%;
}
 
#sidebar-right{
border:2px solid black;
background: maroon;
width:20%;
}
 
#content{
margin:0 auto;
width:60%;
border:2px solid black;
background: grey;
}
 
#footer{
border:2px solid black;
text-align:center;
background: yellow;
height:100px;
}

@adisen · 26.07.2018, 14:28 **[ТС]**

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
#main{
    border:5px solid black;
}
 
#header{
    border:2px solid black;
    background: maroon;
    height:130px;
}
 
#row{
width: 100%; 
display: able;
}
 
#sidebar-left, #sidebar-right, #content {
display: table-cell;
}
 
#sidebar-left{
    border:2px solid black;
    background: maroon;
    height:100px;
    width:20%;
    float:left;
}
 
#sidebar-right{
    border:2px solid black;
    background: maroon;
    height:100px;
    width:20%;
    float:right;
}
 
#content{
    margin:0 auto;
    width:1%;
    border:2px solid black;
    background: grey;
    height:100px;
 
}
 
#footer{
    border:2px solid black;
    text-align:center;
    background: yellow;
    height:100px;
}

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
HTML
<!DOCTYPE html>
<html>
<head>
<title>portfolio DS.adisme</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "style.css">
<link href="icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <div id = "main">
        <div id="row">
            <div id = "header">
            1111
            </div>
            
            <div id = "sidebar-left">
            2222
            </div>  
            
            <div id = "sidebar-right">
            3333
            </div>
        
            <div id = "content">
            4444
            </div>
        </div>
        
        <div id = "footer">По вовпросам касательно самого сайта.            <br>
            <a href=https://vk.com/ld1447 style="color:blue">Вконтакте</a> <br>
            <a href=https://www.facebook.com style="color:blue">Facebook</a>                                
        </div>
        
    </div>
 
</body>
</html>

Что мне исправить, чтоб заработало? Всё равно текст уходит на пределы футера

@Academik · 26.07.2018, 14:35

adisen, уберите высоту и float у айдишников #sidebar-left, #sidebar-right, #content

Добавлено через 1 минуту
Тут центрирование тоже лишнее т.к. используем display: table-cell

CSS
1
2
3
#content{
    margin:0 auto;
}

@adisen · 26.07.2018, 16:03 **[ТС]**

просто шок, с каждой попыткой изменить всё хуже и хуже)) то в столбик выкладываются, то контент идёт не посередине а после двух сайдбаров, то сайдбары на половину экрана а контент размером с сайдбар..
Возвращаемся к первоисточнику:

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
<!DOCTYPE html>
<html>
<head>
<title>portfolio DS.adisme</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "style.css">
<link href="icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <div id = "main">
        <div id="row">
            <div id = "header">
            1111
            </div>
            
            <div id = "sidebar-left">
            2222
            </div>  
            
            <div id = "sidebar-right">
            3333
            </div>
        
            <div id = "content">
            4444
            </div>
        </div>
        
        <div id = "footer">По вовпросам касательно самого сайта.            <br>
            <a href=https://vk.com/ld1447 style="color:blue">Вконтакте</a> <br>
            <a href=https://www.facebook.com style="color:blue">Facebook</a>                                
        </div>
        
    </div>
 
</body>
</html>

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
#main{
    border:5px solid black;
}
 
#header{
    border:2px solid black;
    background: maroon;
    height:130px;
}
 
#sidebar-left{
    border:2px solid black;
    background: maroon;
    height:100px;
    width:20%;
    float:left;
}
 
#sidebar-right{
    border:2px solid black;
    background: maroon;
    height:100px;
    width:20%;
    float:right;
}
 
#content{
    margin:0 auto;
    width:60%;
    border:2px solid black;
    background: grey;
    height:100px;
 
}
 
#footer{
    border:2px solid black;
    text-align:center;
    background: yellow;
    height:100px;
}

https://a(.)radikal(.)ru/a14/1... 1afcc3.png

@adisen · 26.07.2018, 16:04 **[ТС]**

фото

@Academik · 26.07.2018, 16:29

adisen, вы изучили код, который я вам ранее скидывал с примером?

@adisen · 26.07.2018, 18:15 **[ТС]**

изучил, но у меня всё равно не работает, я без понятия почему.

Добавлено через 13 минут
флоаты убрал, разобрался.. css и html изучаю всего 4 дня)) строго не судите.

Добавлено через 11 минут
теперь проблема в другом, блоки идут в таком порядке: "sidebar-left/right,content", как выставить "content" по центру?

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
<!DOCTYPE html>
<html>
<head>
<title>portfolio DS.adisme</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "style.css">
<link href="icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <div id = "main">
        <div id = "header">
            <img src="bg.png" alt="logo" width="100%" height="100%">
        </div>
            <div id="row">
                <div id = "sidebar-left">
                2222
                </div>  
            
                <div id = "sidebar-right">
                3333
                </div>
        
                <div id = "content">
                4444
                </div>
            </div>
        
        <div id = "footer">По вовпросам касательно самого сайта.            <br>
            <a href=https://vk.com/ld1447 style="color:blue">Вконтакте</a> <br>
            <a href=https://www.facebook.com style="color:blue">Facebook</a>                                
        </div>
        
    </div>
 
</body>
</html>

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
#main{
    border:5px solid black;
}
 
#header{
    border:2px solid black;
    background: maroon;
    height:300px;
}
 
#row{
    width: 100%;
    display: table;
}
#sidebar-left, #sidebar-right, #content{
    display: table-cell;
}
 
#sidebar-left{
    border:2px solid black;
    background: SandyBrown;
    height:100px;
    width:20%;
}
 
#sidebar-right{
    border:2px solid black;
    background: SandyBrown;
    height:100px;
    width:20%;
}
 
#content{
    border:2px solid black;
    background: grey;
    height:100px;
    margin:0 auto;
    width:60%;
 
}
 
#footer{
    border:2px solid black;
    text-align:center;
    background: yellow;
    height:100px;
}

@gogolik · 26.07.2018, 18:31

adisen, поменять блоки местами:

HTML5
1
2
3
4
5
6
7
8
9
10
11
            <div id="row">
                <div id = "sidebar-left">
                2222
                </div>  
                <div id = "content">
                4444
                </div>
                <div id = "sidebar-right">
                3333
                </div>
            </div>

@adisen · 26.07.2018, 19:06 **[ТС]**

уже сам догадался, спасибо за поддержку =)

Добавлено через 17 минут
И снова требуется помощь сайта, когда текст доходит до конца блока, и уже готов уйти за пределы блока, он сдвигает соседние блоки
до: https://b.(radikal.)ru/b29/180... ba5b36.png
после: https://d.(radikal.)ru/d29/180... f4bf02.png
Можно ли как-то укоротить текст ссылки, совмещая тег </br> ?
P.S. фото через паинт долго заливать на пк а потом на сайт т.к. пк слабенький. Есть другие способы напрямую через print screen на клаве?

@Academik · 26.07.2018, 19:34

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

Есть другие способы напрямую через print screen на клаве?

Ну print screen, открываем paint, далее ctrl+v, обрезаем лишнее и ctrl+s

И зачем вы ссылки на радикал со скобками вставляете? На форум в аттач заливайте сразу.

@gogolik · 26.07.2018, 20:23

Например, можно так:

CSS
1
word-wrap: break-word;

Ну или <br>.

@adisen · 27.07.2018, 14:02 **[ТС]**

текст всё равно двигает блок, есть возможность вместо длинючего текста сократить его точками когда текст доходит до края блока?

@gogolik · 27.07.2018, 15:11

adisen, для #main укажите:

CSS
1
2
3
4
5
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@adisen 0 / 0 / 0 Регистрация: 26.07.2018 Сообщений: 19
	26.07.2018, 12:35 [ТС]
	Вот фото. Миниатюры 0

@adisen 0 / 0 / 0 Регистрация: 26.07.2018 Сообщений: 19
	26.07.2018, 16:04 [ТС]
	фото Изображения 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	26.07.2018, 16:29
	adisen, вы изучили код, который я вам ранее скидывал с примером? 0

@adisen 0 / 0 / 0 Регистрация: 26.07.2018 Сообщений: 19
	26.07.2018, 19:06 [ТС]
	уже сам догадался, спасибо за поддержку =) Добавлено через 17 минут И снова требуется помощь сайта, когда текст доходит до конца блока, и уже готов уйти за пределы блока, он сдвигает соседние блоки до: https://b.(radikal.)ru/b29/180... ba5b36.png после: https://d.(radikal.)ru/d29/180... f4bf02.png Можно ли как-то укоротить текст ссылки, совмещая тег </br> ? P.S. фото через паинт долго заливать на пк а потом на сайт т.к. пк слабенький. Есть другие способы напрямую через print screen на клаве? 0

@adisen 0 / 0 / 0 Регистрация: 26.07.2018 Сообщений: 19
	27.07.2018, 14:02 [ТС]
	текст всё равно двигает блок, есть возможность вместо длинючего текста сократить его точками когда текст доходит до края блока? 0