Не работает float: left

verfaa

verfaa

Профессор
Регистрация
29 Янв 2007
Сообщения
418
Реакции
49
Всем привет.

Есть блок див. Внутри него через цикл смарти foreach выводятся другие блоки див.

Они имеют вот такой стиль css:


Код: 
.user_album {

width: 250px;

border: 3px dotted #f17dc9;

border-radius:25px;

padding: 5px;

margin: 10px;

color: #FCF7E4;

}
структура страницы примерно такая:
Код: 
<div id="tab" class="tab_content">
 
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
... 
</div>


и на странице отображаются примерно таким образом:





image_4faa7a2ae1fff.jpg


Я хочу, чтобы эти блоки шли по вертикали в 2 ряда и добавляю в класс user_album свойство float: left;



В результате получаю такую картину:
image_4faa7c7158c6d.jpg


Т.е. блоки div class="user_album" при свойстве float: left сразу выходят за границы блока div id="tab" class="tab_content", а без этого свойства нормально все, почему так никак понять не могу. Как сверстать страницу со свойством float: left чтобы блоки div class="user_album" были внутри div id="tab" class="tab_content" и этот блок нормально тянулся вниз.
 
К классу
Код: 
tab_content
добавьте
Код: 
overflow:hidden
 
покажи стиль
Код: 
tab_content
там возможно стоит display:table
 
Может они у вас банально по ширине не становятся. Проверьте ширину id="tab" и вот эти параметры во вложенных дивах:
Код: 
width: 250px;
margin: 10px;
 
Ну так то да, у ТС неправильно настроен css в id=tab или в class=tab_content. Простой пример
Код: 
<html><head><title></title></head>
<body>
<style>
.user_album {
width: 250px;
border: 3px dotted #f17dc9;
border-radius:25px;
padding: 5px;
margin: 10px;
color: #FCF7E4;
float: left;
}
.tab_content{
background-color:#eee;
width:600px;
}
</style>
<div id="tab" class="tab_content">
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
<div class="user_album">content</div>
</div>
</body></html>
работает так, как на картинке в аттаче

42311

вполне возможно, что в id=tab или в class=tab_content установлено примерно следующее:
Код: 
display:overflow;
height:100px;
 

Вложения

  • 12.png
    12.png
    21,5 KB · Просмотры: 71
Вариант Sunday оказался единственно верным, все заработало как надо. А стили для id="tab" и class="tab_content" вообще в css не прописаны - они прописаны для скрипта jquery, чтобы выборки по ним делать. Мне только очень интересно, каким же образом работает свойство overflow:hidden и почему с ним все нормально заработало... Я довольно много работал с css, верстал разные несложные блоки, формы и всегда без него обходился и все нормально тянулось и растягивалось всегда. В учебнике написано про него только "hidden Отображается только область внутри элемента, остальное будет скрыто. " и все, никаких примеров.., как то из определения не очень понятно. Расскажите плиз кто в теме про overflow:hidden и почему он именно он помог в моём случае, очень интересно, спасибо)
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху