Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/55: Рейтинг темы: голосов - 55, средняя оценка - 4.71
289 / 34 / 6
Регистрация: 20.09.2011
Сообщений: 464
1

Блоки выходят за границу другого блока

20.06.2012, 18:26. Просмотров 10396. Ответов 8
Метки нет (Все метки)

Здраствуйте. Такая проблема: вложенные блоки выходят за границу блока, объединяющего их.
HTML5
1
2
3
4
5
6
7
<div id="catalog">
 
<div class="description">1</div>
<div class="description">2</div>
<div class="description">3</div>
 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#catalog
{border:1px solid #0000ff;
border-radius:10px;
margin-bottom:5px;
margin-right:170px;
padding:5px;}
 
.description
{border:1px solid #0000ff;
border-radius:10px;
float:left;
margin-bottom:5px;
padding:5px;
width:30%;}
Вобщем получиться должно так, как изображено на первом примере, но получается так, как изображено на втором.
Блоки выходят за границу другого блока

В чем проблема?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.06.2012, 18:26
Ответы с готовыми решениями:

Как отсечь линии, которые выходят за границу окна?
Как отсечь линии, которые выходят за границу окна? Например, есть фигура, но некоторые ее части...

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

Верстка блоками:внутренние блоки выходят за пределы внешнего
Есть два блока: project1 и project2. Я их поместил внутрь блока project, чтобы получилось так как...

Работа с Word.Application. Как игнорировать сообщение "Поля выходят за границу печати"?
При печате документа из программы появляется сообщение 'Поля выходят за границы печати....

8
36 / 36 / 28
Регистрация: 17.01.2012
Сообщений: 64
20.06.2012, 18:46 2
из-за float: left, применяемого к вложенным блокам, #catalog "теряет" высоту.

добавление

HTML5
1
<div style="clear: both"></div>
должно решить проблему.
0
289 / 34 / 6
Регистрация: 20.09.2011
Сообщений: 464
20.06.2012, 19:15  [ТС] 3
sfc, дело в том, что вложенные блоки должны распологаться таким образом (по три в одном ряду). Нельзя ли сделать, чтобы высота главного блока зависела от вложенных? Или здесь лучше использовать таблицы?
0
36 / 36 / 28
Регистрация: 17.01.2012
Сообщений: 64
20.06.2012, 19:30 4
Так они ведь и будут располагаться таким образом. Блок с clear добавляется последним и не должен повлиять на отображение
1
289 / 34 / 6
Регистрация: 20.09.2011
Сообщений: 464
20.06.2012, 19:43  [ТС] 5
sfc, это помогло. Спасибо.
Только, на сколько я понял, это просто такая "обманка" для браузера?
0
36 / 36 / 28
Регистрация: 17.01.2012
Сообщений: 64
20.06.2012, 20:03 6
Если честно, сам не так давно начал осваивать данную сферу, так что плохо ориентируюсь в подобных вопросах.
Наверное, можно сказать и так. Раньше понимал это таким образом: плавающий элемент "вырывается" из общего потока; clear отменяет действие float и высота контейнера равна высоте этого блока. Однако сейчас посмотрел, высота последнего блока (который с clear) равна 0. Так что без понятия почему так происходит, сам не против был бы узнать
0
Эксперт JSЭксперт HTML/CSS
2423 / 1102 / 309
Регистрация: 23.06.2011
Сообщений: 3,454
20.06.2012, 20:35 7
Тайна свойства float CSS
0
29 / 29 / 10
Регистрация: 28.10.2011
Сообщений: 183
21.06.2012, 20:03 8
Добавь просто к стилю #catalog,
CSS
1
overflow: hidden;
и будет тебе счастье

P.S. В IE 6 это работать к сожалению не будет, но выход есть. Там же добавь еще "zoom:1;"
0
0 / 0 / 0
Регистрация: 25.04.2012
Сообщений: 52
24.06.2012, 11:00 9
если хотите что бы главный блок становился больше от того что в нем дате ему минимальную длину. вот так min-height:дпустим 1200px; а обычный height: не указывать; а и блоку задайте pagging-bottomсколько надо отступа в пикселах);
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.06.2012, 11:00

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

Изображение и текст выходят за рамки блока
Здравствуйте. Помогите разобраться с этим У меня DLE 9.7 Я уже все файлы перековырял не могу...

Не выходят агенты из блока Source класса Покупатель
Создал модель из книги С.А. Даденкова, Е.Л. Кона &quot;Имитационное моделирование дискретных ИС&quot; на...

Выход картинки за границу блока
Привет всем. Появилась такая проблема, которую я не в состоянии решить. Я сейчас делаю страницу, с...

Поле input выходит за границу блока
Поле для ввода текста при изменении размеров браузера выходит за границу блока, какое свойство...


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

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

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