Как сделать чтобы текст не заходил на другой блок?

@_NE_KAKIX_IMEN_ · Регистрация: 20.05.2015

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

Как сделать чтобы не зависимо сколько текста в блоке, что бы блок растягивался за текстом.
То-есть у меня огромный текст и он вводится в блок контейнер, и когда заканчивается блок что бы текст не заходил на другой блок а был в этом контейнере, ну что бы контейнер растягивался в зависимости от текста.

@mrtoxas · 23.11.2016, 17:59

_NE_KAKIX_IMEN_, приведите код, который даст возможность воспроизвести проблему.

@_NE_KAKIX_IMEN_ · 23.11.2016, 18:47 **[ТС]**

Ну смотрите у меня есть блоки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
 <div class="page">
            <div class="row">
                <div class="header">Header</div>
            </div>
            <div class="row">
                <div class="navigation">Navigation</div>
                <div class="content">Main content</div>
                <div class="related_contentl">Related content</div>
            </div>
            <div class="row">
                <div class="footer">Footer</div>
            </div>
        </div>

В них заполняется текст любой, хоть новости хоть что.
Но когда текс выходит и-за блока он начинает лезть на другой блок.
Как растянуть блок что бы вместе с текстом уходил в низ низ и низ.
Вы скажите свойства какие есть для этого, а я подберу что надо.

@Kenworth · 24.11.2016, 11:24

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

Ну смотрите у меня есть блоки

Ну смотрим и что?? )) Где стили которые отобразят проблему.
+ вопрос - Это код то фрэймворка или самописный???

@_NE_KAKIX_IMEN_ · 24.11.2016, 16:17 **[ТС]**

Был фраеворком стал самописным.
Ну как бы так это страница блоков:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
        <div class="page">
            <div class="row">
                <div class="header col">Header</div>
            </div>
            <div class="row">
                <div class="navigation col">Navigation</div>
                <div class="content col">content</div>
                <div class="related col">Related</div>
            </div>
            <div class="row">
                <div class="footer col">Footer</div>
            </div>
        </div>

Стиль для блоков всех такой:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.col {
      //overflow: scroll; Думал добавлю этот стиль и блоки буду повторять весь текст но нет, все во лишь добавляется скрол бар
      border:0px solid rgba(0,0,0,0);
      float:left;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      -moz-background-clip:padding-box !important;
      -webkit-background-clip:padding-box !important;
      background-clip:padding-box !important;
      background: #777;
      margin-bottom: 12px;
    }

У меня текст уходит на другой блок, а я хочу что бы блок вместе с текстом растягивался.
Сколько текста такой и блок.

@Kenworth · 24.11.2016, 18:49

После свойства "float" наверное не очищены потоки стилей.
В приведенном Вами коде результат таков (1.png)
Если убрать свойство "float" - то результат будет таков (2.png)
Если оставлять "float" и делать очистку потоков - то результат будет таков (3.png)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        /* For modern browsers */
.row:before,
.row:after {
   content: "";
   display: table;
}
.row:after {
   clear: both;
}
 
/* для IE6-7 */
.row {
   zoom: 1;
}

@_NE_KAKIX_IMEN_ · 24.11.2016, 21:33 **[ТС]**

То-есть мне для стилей row добавить очистку?

@Kenworth · 25.11.2016, 09:31

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

То-есть мне для стилей row добавить очистку?

Естественно. Когда применяется свойство "float", то НЕОБХОДИМО делать очистку потоков стилей РОДИТЕЛЬСКОМУ ЭЛЕМЕНТУ
К прочтению о том как работать с "float"
CLEARFIX НА CSS
clearfix

@_NE_KAKIX_IMEN_ · 25.11.2016, 10:47 **[ТС]**

Добавил очистку. Посмотрим на результат. Спасибо за информацию.
Еще вопрос мне надо добавить класс clearfix?
Или просто для элементов row добавить код:

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
/* Reusable column setup */
.col {
      border:1px solid rgba(0,0,0,0);
      float:left;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      -moz-background-clip:padding-box !important;
      -webkit-background-clip:padding-box !important;
      background-clip:padding-box !important;
      background: #777;
      // margin-bottom: 12px;
      margin-bottom: 1px;
    }
    /* Добавлю очистку для класса row*/
    .row:before,
    .row:after {
        content: "";
        display: table;
    }
    .row:after {
        clear: both;
    }
    /* для IE6-7 */
    .row {
        zoom: 1;
    }

Комментарий модератора

Стили оформляются с помощью тега [CSS]!

@Kenworth · 25.11.2016, 12:36

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

Еще вопрос мне надо добавить класс clearfix?

Если делать классом - то просто дописываешь класс clearfix в нужную позицию разметки и тем самым уйдешь от копирования кода.

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

Или просто для элементов row добавить код:

В таком случае каким бы ни был родительский элемент (название класса или id) - то придется писать один и тот же код несколько раз , то есть дублировать, а это очень и очень нехорошо

@Atljh0987 · 25.11.2016, 14:10

А тебе они обязательно в строку нужны, или как? Текст, который непосредственно в блоке никак и не вылезет за блок, тем более не налезет на другой, можешь сделать скрин как это у тебя происходит?

@_NE_KAKIX_IMEN_ · 25.11.2016, 17:27 **[ТС]**

я сделал фиксированые блоки и проблема решилась.
Делаю так:

CSS
1
min-height: 100px;

На счет правильности я не уверен)

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@_NE_KAKIX_IMEN_ 0 / 4 / 1 Регистрация: 20.05.2015 Сообщений: 450

	Как сделать чтобы текст не заходил на другой блок? 23.11.2016, 17:50. Показов 10844. Ответов 11 Метки нет (Все метки) Как сделать чтобы не зависимо сколько текста в блоке, что бы блок растягивался за текстом. То-есть у меня огромный текст и он вводится в блок контейнер, и когда заканчивается блок что бы текст не заходил на другой блок а был в этом контейнере, ну что бы контейнер растягивался в зависимости от текста. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.11.2016, 17:59
	_NE_KAKIX_IMEN_, приведите код, который даст возможность воспроизвести проблему. 0

@_NE_KAKIX_IMEN_ 0 / 4 / 1 Регистрация: 20.05.2015 Сообщений: 450
	24.11.2016, 21:33 [ТС]
	То-есть мне для стилей row добавить очистку? 0

@Atljh0987 0 / 0 / 0 Регистрация: 25.08.2015 Сообщений: 20
	25.11.2016, 14:10
	А тебе они обязательно в строку нужны, или как? Текст, который непосредственно в блоке никак и не вылезет за блок, тем более не налезет на другой, можешь сделать скрин как это у тебя происходит? 0