Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
67 / 18 / 2
Регистрация: 21.01.2013
Сообщений: 221
1

Неверное отображение дивов - как исправить?

28.09.2017, 14:29. Показов 416. Ответов 2

Здравствуйте!
Проблема такая. Есть страница с указанным ниже содержанием. В реальности дивов класса "okno" должно быть гораздо больше, я просто для компактности две штуки указал.
Так вот, заголовки отображаются не между группами, как в потоке прописано, а рядом. То есть все окна (из обеих групп) отображаются подряд, заголовок1 сверху, а заголовок2 - сбоку от окон, на строку ниже заголовка1.

Почему так происходит? Ведь по идее "float left" должен действовать только внутри класса группы. Как решить проблему? Как заставить заголовок2 отображаться НИЖЕ всех дивов класса "окно" предыдущей группы?


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h3>Заголовок 1</h3>
 
    <div class="gruppa">
 
<div class="okno">Содержимое 1</div>
<div class="okno">Содержимое 2</div>
 
    </div>
 
<br>
 
<h3>Заголовок 2</h3>
 
    <div class="gruppa">
 
<div class="okno">Содержимое 3</div>
<div class="okno">Содержимое 4</div>
 
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.gruppa {
    float: none;
    width: 100%;
    text-align: center;
}
 
.okno {
    float: left;
    width: 324px;
    height: auto;
    padding: 4px;
    margin: 12px;
    border: 1px solid #f00;
    font-family: Arial;
    font-size: 14px;
    text-align: center;
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.09.2017, 14:29
Ответы с готовыми решениями:

Не могу исправить наложение дивов друг на друга
Доброго времени суток. Делаю табы вообщем. В блоке есть 4 блока с шириной, высотой (на фоне...

Неверное отображение
Здравствуйте, товарищи! Интересуюсь HTML, CSS совсем немного, опыта пока у меня маловато. Недавно...

Неверное отображение в IE
Здравствуйте.Есть такой вопрос насчёт :hover в css В фаирфоксе нижеследующий код работает, а в IE...

Неверное отображение
Здравствуйте, я недавно занимаюсь версткой , скорее даже не занимаюсь а просто учусь. У меня...

2
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,126
28.09.2017, 14:41 2
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
<style>
 
 
 
 
.gruppa {
    float: none;
  display: inline-table;
    text-align: center;
}
 
.okno {
    float: left;
    width: 324px;
    height: auto;
    padding: 4px;
    margin: 12px;
    border: 1px solid #f00;
    font-family: Arial;
    font-size: 14px;
    text-align: center;
}
 
</style>
 
<h3>Заголовок 1</h3>
 
    <div class="gruppa">
 
<div class="okno">Содержимое 1</div>
<div class="okno">Содержимое 2</div>
 
    </div>
 
<br>
 
 
<h3>Заголовок 1</h3>
 
    <div class="gruppa">
 
<div class="okno">Содержимое 3</div>
<div class="okno">Содержимое 4</div>
 
    </div>
1
67 / 18 / 2
Регистрация: 21.01.2013
Сообщений: 221
28.09.2017, 15:09  [ТС] 3
Цитата Сообщение от andyyy Посмотреть сообщение
display: inline-table;
Вот где собака зарыта! Вроде работает, но надо в других браузерах тоже проверить... Как-то я это свойство раньше не использовал, не приходилось...
Что ж, спасибо за подсказку!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.09.2017, 15:09

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

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

Неверное отображение кодировки
Приветствую всех. Имею сайт. На сайте немного странный способ работы. Есть индекс, с которого...

Неверное отображение чисел
Всё видно на картинке. Как так ума не приложу Назначал 4 194 304 (4*1024*1024) Выборки реагируют...

Неверное отображение строк
задание : Написать программу выделения из исходной строки подстроки символов заданной длины с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.