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

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

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

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

@mrtoxas · 23.11.2016, 17:59

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

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

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

HTML5

 <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

        <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

.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

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

/* 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;

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

@_NE_KAKIX_IMEN_ 0 / 4 / 1 Регистрация: 20.05.2015 Сообщений: 450
		1
	Как сделать чтобы текст не заходил на другой блок? 23.11.2016, 17:50. Показов 10096. Ответов 11 Метки нет (Все метки) Как сделать чтобы не зависимо сколько текста в блоке, что бы блок растягивался за текстом. То-есть у меня огромный текст и он вводится в блок контейнер, и когда заканчивается блок что бы текст не заходил на другой блок а был в этом контейнере, ну что бы контейнер растягивался в зависимости от текста. 0

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

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	24.11.2016, 11:24	4
	Сообщение от _NE_KAKIX_IMEN_ Ну смотрите у меня есть блоки Ну смотрим и что?? )) Где стили которые отобразят проблему. + вопрос - Это код то фрэймворка или самописный??? 0

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

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	25.11.2016, 09:31	8
	Сообщение от _NE_KAKIX_IMEN_ То-есть мне для стилей row добавить очистку? Естественно. Когда применяется свойство "float", то НЕОБХОДИМО делать очистку потоков стилей РОДИТЕЛЬСКОМУ ЭЛЕМЕНТУ К прочтению о том как работать с "float" CLEARFIX НА CSS clearfix 0

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	25.11.2016, 12:36	10
	Сообщение от _NE_KAKIX_IMEN_ Еще вопрос мне надо добавить класс clearfix? Если делать классом - то просто дописываешь класс clearfix в нужную позицию разметки и тем самым уйдешь от копирования кода. Сообщение от _NE_KAKIX_IMEN_ Или просто для элементов row добавить код: В таком случае каким бы ни был родительский элемент (название класса или id) - то придется писать один и тот же код несколько раз , то есть дублировать, а это очень и очень нехорошо 0

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

	25.11.2016, 17:27