Адаптивность блоков и её высоты

@Azzar90 · Регистрация: 22.07.2017

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

Всем привет! А кто мне может посоветовать как сделать так, чтобы, например, когда я экран сужаю и чтобы блоки пропорционально меняли свою высоту? Т.е. например, ведь как может быть если в блоке есть текст в виде ссылки и в каком-то блоке может быть на пару символов стать больше, то блоки будут разлетаться. Для примера я оставил жёлтый background, у которого отступы внутри специально для вида, как будто ему придали margin-right и из практики, как я понял, лучше margin-right не делать, иначе при сужение блоки будут рассыпаться. Этому блоку с жёлтым я дал фиксированную высоту в 230px, но потом, как я заметил, при сужение фикс. высота остаётся, а ширина адаптивится. Как быть в этом случае? Ссылка на страницу http://fruity-sky.ru/forUs/

@Grey · 20.01.2018, 11:39

Не нужно делать фиксированную высоту. Высота блока подстраивается под текст.
Размер текста можно изменить JS.
Но на маленьких экранах в тексте не разберёшь что написано.
Поэтому фигня это всё.
А чтоб блоки не рассыпались делают адаптивную вёрстку.

@Fedor92 · 20.01.2018, 12:04

DoctorJ87, первый совет верстать на флексах... Высота каждого блока в строке будет подстраиваться под высоту блока имеющего наибольшую высоту... Совет два - меняйте количество блоков в строке при изменении ширины экрана... К примеру, на десктопе в строке - 3 блока, на планшетах - 2 блока, на мобильных устройствах - 1 блок... Короче, чтобы обобщить сразу две рекомендации - верстайте свой макет с помощью бутстрап 4... Если совсем топорно без флексов можно юзать в блоках минимальную высоту... То есть задать минимальный параметр высоты для блока с учётом максимальной высоты выводимого контента... Более технологично ввести функцию для обрезки описания, но это уже необходимо прибегать к скриптам на php...

@Azzar90 · 20.01.2018, 17:54 **[ТС]**

Fedor92 Спасибо.Раньше не знал про функцию для обрезки и это лучший вариант чем другие.Более комфортный вариант.PHP никогда не подведёт а вот если бы на JS использовать такую функцию то как известно многие браузеры не позволяют отработать коду JS и был бы просто бардак.

@Azzar90 · 20.01.2018, 19:11 **[ТС]**

а можешь сказать в чём дело?что за вопрос.знаки когда я установил mb_strimwidth в конце второй части printf как на картинке?оно вроде как обрезало но не так.Сперва попытался сделать так.Сверху идёт запрос к таблице и потом создал переменную и в неё закинул вот так как в примере:
$v = mb_strimwidth($itogKrab['opisanie'], 0, 43, '...');
И потом эту переменную $v вставил во второй части printf но не сработало почему то.

PHP
1
2
3
4
5
6
foreach ($c as $itogKrab) {
printf("<div class='forimg'>
<div class='viewOr'><img src='images/eye_318-80625.png'/><span>%s</span><img class='triCol' src='images/triCol.png'/><div class='clear'></div></div>
<div class='imgSelf'><img class='lover2' src='%s'/></div>
<a href='watch-somethink.php?id=%s'>%s</a>
</div>",$itogKrab['view'],$itogKrab['miniimg'],$itogKrab['id'],mb_strimwidth($itogKrab['opisanie'], 0, 43, '...'));

@Fedor92 · 20.01.2018, 19:17

Что-то не так с кодировкой по всей видимости - этот вопрос лучше задать на ветке php...

@Azzar90 · 20.01.2018, 19:50 **[ТС]**

А что значит "задать на ветке php..."?не понял что это такое

@Fedor92 · 20.01.2018, 19:59

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

А что значит "задать на ветке php..."?не понял что это такое

Здесь... Там ребята пошустрее подскажут, что не так...

@Grey · 20.01.2018, 20:56

похоже сайт в UTF-8, а в базе CP-2150.
нужно указывать кодировку к базе

PHP
1
mysqli_set_charset($dbc, "utf8")

@Azzar90 · 04.02.2018, 12:41 **[ТС]**

Fedor92, Спасибо за совет для использования флексов и ты был прав.Только что начал обучение по этой технологии и выяснил что в классической вёрстке нельзя сделать так чтобы блоки были одинаковой высоты.Это фактически невозможно за ней уследить.Оказывается действительно если в элементе больше текста чем в соседнем то там где мало текста добавляется равномерная высота.главное родительскому контейнеру добавить display:flex и создадутся оси и всё будет нормально.Круто,я и не знал что такое возможно.Я вообще думал что в классической вёрстке как то делают чтобы ровно всё распределялось и я думал что чего то не знаю раз уж они так делают.Ведь если не использовать flex и блоков много то когда будет сужение браузера то блоки будут рассыпаться так как в одном блоке много текста а в другом мало.

Добавлено через 7 минут

@Fedor92 · 04.02.2018, 13:25

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

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

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

К примеру:

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
<html>
<head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
        div{
            width:33.33%;
            height:100%;
            padding:10px;
            border:2px solid red;
            display:table-cell
        }
    </style>
</head>
<body>
 
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis odio perferendis libero saepe voluptatum fugiat dolore voluptates. Doloremque, quo saepe ad quis ipsum molestias neque pariatur commodi eveniet obcaecati ea.
    </div>
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, sapiente, corporis possimus debitis quam quo fugiat voluptates similique quidem dolorem ex non quibusdam odio suscipit error maiores itaque blanditiis vel? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, voluptatum, consequatur eos earum iure repudiandae omnis voluptatem nihil. Cumque, repellendus saepe maiores aperiam fuga nobis vel tenetur placeat! Sunt, officia.
    </div>
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ex, voluptatem natus facere explicabo fugiat officia rerum atque tempore quam odio dolorem modi corrupti excepturi quo enim odit deserunt. Iusto?
        Consequatur, asperiores, nihil atque quisquam minus sint dolor corporis possimus quaerat natus aliquam ducimus provident quos hic quidem voluptatibus repellendus repellat veritatis sit obcaecati quasi distinctio cupiditate omnis vitae maxime?
        Ad, dolore, sint, nisi, tempora modi perferendis neque commodi ipsam amet repellendus facilis autem sunt vel corporis iure reprehenderit dolorum ex consectetur minima ratione fugit veritatis molestiae magni numquam repellat?
    </div>
    
</body>
</html>

Так для общего развития...

@Azzar90 · 04.02.2018, 15:06 **[ТС]**

Fedor92, Получается из этого блока сделали типо ячейку таблицы?ведь ячейки как известно распределяются по высоте или как там не помню.просто не верстаю на table.А это свойство display:table-cell оно вообще кроссплатформенное?всеми браузерами поддерживает даже с IE9?

@Fedor92 · 04.02.2018, 15:17

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

А это свойство display:table-cell оно вообще кроссплатформенное?всеми браузерами поддерживает даже с IE9?

Естественно...

Даже с IE 7 и ниже, если память мне не изменяет...)

@Azzar90 · 06.02.2018, 16:10 **[ТС]**

Fedor92, у меня вот вопрос.Вот у меня есть блоки и я им задал 33.33% и написал им свойство display:table-cell и потом добавил float:left и смотрю рассчитывая на то что блоки встанут по 3 блока в строку но не тут то было.Ещё для примера добавил 3 блока и они встали рядом и получилось шесть блоков.Как быть?ведь если не писать display:table-cell то блоки встают по три в строку а тут аж шесть в строке и эти три блока они стали маленькими.как сделать чтобы был перенос строки?это скорее всего последний вопрос по этой теме так как уже почти всё решилось

@Fedor92 · 06.02.2018, 16:18

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

Как быть?

Верстать...

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
        div.row{
        
            display:table-row
        
        }
        
        div.cell{
            width:33.33%;
            height:100%;
            padding:10px;
            border:2px solid red;
            display:table-cell
        }
    </style>
</head>
<body>
 
    <div class="row">
 
        <div class="cell">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis odio perferendis libero saepe voluptatum fugiat dolore voluptates. Doloremque, quo saepe ad quis ipsum molestias neque pariatur commodi eveniet obcaecati ea.
        </div>
        
        <div class="cell">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, sapiente, corporis possimus debitis quam quo fugiat voluptates similique quidem dolorem ex non quibusdam odio suscipit error maiores itaque blanditiis vel? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, voluptatum, consequatur eos earum iure repudiandae omnis voluptatem nihil. Cumque, repellendus saepe maiores aperiam fuga nobis vel tenetur placeat! Sunt, officia.
        </div>
        
        <div class="cell">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ex, voluptatem natus facere explicabo fugiat officia rerum atque tempore quam odio dolorem modi corrupti excepturi quo enim odit deserunt. Iusto?
            Consequatur, asperiores, nihil atque quisquam minus sint dolor corporis possimus quaerat natus aliquam ducimus provident quos hic quidem voluptatibus repellendus repellat veritatis sit obcaecati quasi distinctio cupiditate omnis vitae maxime?
            Ad, dolore, sint, nisi, tempora modi perferendis neque commodi ipsam amet repellendus facilis autem sunt vel corporis iure reprehenderit dolorum ex consectetur minima ratione fugit veritatis molestiae magni numquam repellat?
        </div>
        
    </div>
    
        <div class="row">
 
        <div class="cell">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis odio perferendis libero saepe voluptatum fugiat dolore voluptates. Doloremque, quo saepe ad quis ipsum molestias neque pariatur commodi eveniet obcaecati ea.
        </div>
        
        <div class="cell">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, sapiente, corporis possimus debitis quam quo fugiat voluptates similique quidem dolorem ex non quibusdam odio suscipit error maiores itaque blanditiis vel? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, voluptatum, consequatur eos earum iure repudiandae omnis voluptatem nihil. Cumque, repellendus saepe maiores aperiam fuga nobis vel tenetur placeat! Sunt, officia.
        </div>
        
        <div class="cell">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ex, voluptatem natus facere explicabo fugiat officia rerum atque tempore quam odio dolorem modi corrupti excepturi quo enim odit deserunt. Iusto?
            Consequatur, asperiores, nihil atque quisquam minus sint dolor corporis possimus quaerat natus aliquam ducimus provident quos hic quidem voluptatibus repellendus repellat veritatis sit obcaecati quasi distinctio cupiditate omnis vitae maxime?
            Ad, dolore, sint, nisi, tempora modi perferendis neque commodi ipsam amet repellendus facilis autem sunt vel corporis iure reprehenderit dolorum ex consectetur minima ratione fugit veritatis molestiae magni numquam repellat?
        </div>
        
    </div>
    
</body>
</html>

@Azzar90 · 06.02.2018, 16:23 **[ТС]**

Fedor92, если получается у блока стоит display:table-cell то переносы не допускаются да?просто у тебя в ответе я вижу что для такой затеи надо дублировать родительский блок в котором блоки имеют display:table-cell.но мне то надо чтобы это было в одном родительском блоке,и чтобы в одном родительском блоке были блоки с display:table-cell и с переносами на новую строку.

@Fedor92 · 06.02.2018, 16:28

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

Fedor92, если получается у блока стоит display:table-cell то переносы не допускаются да?

Обёртка для блоков нужна, чтобы броузер понимал сколько блоков необходимо расположить в одной строке... Иными словами родительские блоки - это строки, дочерние - столбцы...

В противном случае все блоки расположенные в одном родительском блоке будут восприниматься, как одна строка...

@Azzar90 · 06.02.2018, 16:32 **[ТС]**

Fedor92, вот теперь понятно в чём дело.это как в табличной вёрстке.помню не много проходил тему табличной вёрстки и натыкался на строки итп получается если блокам div задавать display:table-cell и display:table-row то эти div.блоки превращаются в табличные?а то видно что как будто оно так и идёт в табличном варианте.Ведь насколько мне память напоминает нельзя сделать так чтобы был перенос ячеек в одном <tr>,нужно там указывать <tr> и вот этот вот <tr>это как бы родительский блок

@Fedor92 · 06.02.2018, 16:36

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

Fedor92, вот теперь понятно в чём дело.это как в табличной вёрстке.помню не много проходил тему табличной вёрстки и натыкался на строки итп получается если блокам div задавать display:table-cell и display:table-row то эти div.блоки превращаются в табличные?

Совершенно верно... Только есть разница... Если делать таблицу на блоках с помощью табличных свойств, то на мобильной версии её можно без проблем адаптировать... А вот, если делать таблицу с помощью тегов, то с адаптацией будут проблемы...

@Azzar90 · 20.02.2018, 14:03 **[ТС]**

Fedor92,
А можешь сказать какое свойство надо дописать или что то ещё чтобы оно не выстраивалась всё в одну колонку?Дело в том что пробовал сделать так то есть блоку bloGL прописал ему display:table-row;и он стал строкой
и в него всунул элементы(блоки)с шириной 25% чтобы встали по четыре и тем элементам которые внутри него(у которого display:table-row) прописал display:table-cell; и потом просмотрел и встало всё в одну колонку и я это сделал в цикле с printf но потом попробовал без цикла
то есть сделал повтор блоков у которого display:table-row; и они встали как надо в одну строку по четыре.В чём тут дело может быть?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#gol{
    max-width:1000px;
    border:1px solid#000;
    margin:0 auto;
    min-height:120px;
}
.bloGL{
    display:table-row;
}
.blo{
width:25%;
width:250px;
display:table-cell;
border:1px solid#000;
    
}
.blo img{
width:100%; 
}

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="gol">
 
<?php
$rud = mysql_connect("localhost","sky","111111");
mysql_select_db("coolsite",$rud);
$itog = mysql_query("SELECT * FROM info");
 
$myrow = mysql_fetch_array($itog);
 
do{
printf("<div class='bloGL'><div class='blo'><img src='%s'/>%s</div></div>",$myrow['miniimg'],$myrow['opisanie']);   
}
while($myrow = mysql_fetch_array($itog));
 
?>
 
</div>

Потом попробовал просто дублируя вот этот блок два раза и он нормально всё выводит:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="bloGL">
<div id="blo">f</div>
<div id="blo"></div>
<div id="blo"></div>
<div id="blo"></div>
</div>
 
<div id="bloGL">
<div id="blo">f</div>
<div id="blo"></div>
<div id="blo"></div>
<div id="blo"></div>
</div>

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

Адаптивность блоков и её высоты

Решение

Решение

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195

	Адаптивность блоков и её высоты 20.01.2018, 09:27. Показов 7748. Ответов 22 Метки нет (Все метки) Всем привет! А кто мне может посоветовать как сделать так, чтобы, например, когда я экран сужаю и чтобы блоки пропорционально меняли свою высоту? Т.е. например, ведь как может быть если в блоке есть текст в виде ссылки и в каком-то блоке может быть на пару символов стать больше, то блоки будут разлетаться. Для примера я оставил жёлтый background, у которого отступы внутри специально для вида, как будто ему придали margin-right и из практики, как я понял, лучше margin-right не делать, иначе при сужение блоки будут рассыпаться. Этому блоку с жёлтым я дал фиксированную высоту в 230px, но потом, как я заметил, при сужение фикс. высота остаётся, а ширина адаптивится. Как быть в этом случае? Ссылка на страницу http://fruity-sky.ru/forUs/ 0

@Grey Тутошний я 2147 / 1202 / 225 Регистрация: 03.11.2009 Сообщений: 4,424 Записей в блоге: 2
	20.01.2018, 11:39
	Не нужно делать фиксированную высоту. Высота блока подстраивается под текст. Размер текста можно изменить JS. Но на маленьких экранах в тексте не разберёшь что написано. Поэтому фигня это всё. А чтоб блоки не рассыпались делают адаптивную вёрстку. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	20.01.2018, 12:04
	Сообщение было отмечено DoctorJ87 как решение Решение DoctorJ87, первый совет верстать на флексах... Высота каждого блока в строке будет подстраиваться под высоту блока имеющего наибольшую высоту... Совет два - меняйте количество блоков в строке при изменении ширины экрана... К примеру, на десктопе в строке - 3 блока, на планшетах - 2 блока, на мобильных устройствах - 1 блок... Короче, чтобы обобщить сразу две рекомендации - верстайте свой макет с помощью бутстрап 4... Если совсем топорно без флексов можно юзать в блоках минимальную высоту... То есть задать минимальный параметр высоты для блока с учётом максимальной высоты выводимого контента... Более технологично ввести функцию для обрезки описания, но это уже необходимо прибегать к скриптам на php... 1

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	20.01.2018, 17:54 [ТС]
	Fedor92 Спасибо.Раньше не знал про функцию для обрезки и это лучший вариант чем другие.Более комфортный вариант.PHP никогда не подведёт а вот если бы на JS использовать такую функцию то как известно многие браузеры не позволяют отработать коду JS и был бы просто бардак. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	20.01.2018, 19:17
	Что-то не так с кодировкой по всей видимости - этот вопрос лучше задать на ветке php... 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	20.01.2018, 19:50 [ТС]
	А что значит "задать на ветке php..."?не понял что это такое 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	04.02.2018, 12:41 [ТС]
	Fedor92, Спасибо за совет для использования флексов и ты был прав.Только что начал обучение по этой технологии и выяснил что в классической вёрстке нельзя сделать так чтобы блоки были одинаковой высоты.Это фактически невозможно за ней уследить.Оказывается действительно если в элементе больше текста чем в соседнем то там где мало текста добавляется равномерная высота.главное родительскому контейнеру добавить `display:flex` и создадутся оси и всё будет нормально.Круто,я и не знал что такое возможно.Я вообще думал что в классической вёрстке как то делают чтобы ровно всё распределялось и я думал что чего то не знаю раз уж они так делают.Ведь если не использовать flex и блоков много то когда будет сужение браузера то блоки будут рассыпаться так как в одном блоке много текста а в другом мало. Добавлено через 7 минут 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	04.02.2018, 15:06 [ТС]
	Fedor92, Получается из этого блока сделали типо ячейку таблицы?ведь ячейки как известно распределяются по высоте или как там не помню.просто не верстаю на table.А это свойство display:table-cell оно вообще кроссплатформенное?всеми браузерами поддерживает даже с IE9? 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	06.02.2018, 16:10 [ТС]
	Fedor92, у меня вот вопрос.Вот у меня есть блоки и я им задал 33.33% и написал им свойство display:table-cell и потом добавил float:left и смотрю рассчитывая на то что блоки встанут по 3 блока в строку но не тут то было.Ещё для примера добавил 3 блока и они встали рядом и получилось шесть блоков.Как быть?ведь если не писать display:table-cell то блоки встают по три в строку а тут аж шесть в строке и эти три блока они стали маленькими.как сделать чтобы был перенос строки?это скорее всего последний вопрос по этой теме так как уже почти всё решилось 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	06.02.2018, 16:23 [ТС]
	Fedor92, если получается у блока стоит display:table-cell то переносы не допускаются да?просто у тебя в ответе я вижу что для такой затеи надо дублировать родительский блок в котором блоки имеют display:table-cell.но мне то надо чтобы это было в одном родительском блоке,и чтобы в одном родительском блоке были блоки с display:table-cell и с переносами на новую строку. 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	06.02.2018, 16:32 [ТС]
	Fedor92, вот теперь понятно в чём дело.это как в табличной вёрстке.помню не много проходил тему табличной вёрстки и натыкался на строки итп получается если блокам div задавать display:table-cell и display:table-row то эти div.блоки превращаются в табличные?а то видно что как будто оно так и идёт в табличном варианте.Ведь насколько мне память напоминает нельзя сделать так чтобы был перенос ячеек в одном <tr>,нужно там указывать <tr> и вот этот вот <tr>это как бы родительский блок 0