Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.78/27: Рейтинг темы: голосов - 27, средняя оценка - 4.78
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
1

float

16.09.2010, 16:25. Просмотров 4958. Ответов 25
Метки нет (Все метки)

У меня много вопросов по поводу float.

Первый: Почему если у родителя display: table-cell, то элемент с float'ом переносится? Как этого избежать?

Второй: при float'e элемент сжимается по контенту, и это можно использовать, чтобы сделать нерастягивающийся на соседние элементы div (если этого не указать, то его background растянется). А чтобы сделать переход на новую строчку после такого элемента, надо у того элемента, который будет переноситься, надо ставить clear: left/right. Я всё правильно говорю? Нет ли других способов сжать div по его контенту?

Третьий: вот у меня такой код:
HTML5
1
<div style="float: left;">LEFT</div><div style="?">CENTER REZINE</div><div style="float: right;">RIGHT</div>
Что надо задать в style у центрального div'a, чтобы он занял всю оставшуюся ширину (вот допустим делаю резиновый сайт, центральная часть должна растягиваться на всё оставшееся место)?

Четвёртый: Какой логикой пользуется float? Элемент сжимается по контенту, т. к. он не считается полноценным контентом. По этой же причине background соседнего div'a без float'a заполнит и его часть. Но если у этого div'a без float'a будет scroll, то background будет только на этом самом div'e без float'a, т. к. background может лежать в scroll'e, ведь тут уже задаются явные рамки для этого div'a.
Далее идёт следующая непонятка: clientWidth у div'a без float'a равен всей ширине родителя, а если поставить overflow: hidden, то background не растянется на соседние div'ы с float'ом. Почему? Ведь он считает, что его ширина равна всей ширине родителя, следственно background должен растянуться по всему родителю даже с overflow: hidden, но по какой-то причине это не так. Почему? И ещё элементы с float'ом за контент не считаются, а считаются, как доп. контент, т. к. по высоте род. блоки под них не подстраиваются. Я прав?

Заранее благодарен за ответы.
1
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.09.2010, 16:25
Ответы с готовыми решениями:

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
3-й час бьюсь, но никак не могу понять, что не так делаю. почему оранжевый...

float элемент во float элементе
На странице есть два float элемента, один для меню, второй для контента. В...

Float
В строке 12 поставлен float: left. Почему второй div начинается с того места,...

float
Привет! Помогите, пожалуйста. Мне надо, чтобы слева картинка, а слева писался...

IE и float
Почему такой код: &lt;ul style=&quot;list-style-type: none; background: yellow;...

25
Crudelis
Шаровик затейник
683 / 432 / 78
Регистрация: 06.05.2010
Сообщений: 1,109
16.09.2010, 23:11 2
Цитата Сообщение от Hagrael Посмотреть сообщение
А чтобы сделать переход на новую строчку после такого элемента, надо у того элемента, который будет переноситься, надо ставить clear: left/right.
надо ставить clear:both, т.е. запретить все обтекания

Добавлено через 1 минуту
Цитата Сообщение от Hagrael Посмотреть сообщение
Что надо задать в style у центрального div'a, чтобы он занял всю оставшуюся ширину (вот допустим делаю резиновый сайт, центральная часть должна растягиваться на всё оставшееся место)?
я думаю style="width:100%"

Добавлено через 2 минуты
Цитата Сообщение от Hagrael Посмотреть сообщение
Какой логикой пользуется float?
честно говоря я не слышал что float имеет какое нибудь свойство к тому чтоб растягивать див, флоат отвечает за обтекание и не более
0
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
17.09.2010, 14:30  [ТС] 3
Цитата Сообщение от Crudelis Посмотреть сообщение
я думаю style="width:100%"
Нет. Это растянет его по всему род. блоку.

Добавлено через 1 час 56 минут
Цитата Сообщение от Crudelis Посмотреть сообщение
честно говоря я не слышал что float имеет какое нибудь свойство к тому чтоб растягивать див, флоат отвечает за обтекание и не более
Он сжимает div по контенту. Float это ваще многозначущее свойство. Оно
1) сжимает элемент по контенту
2) делает его позицию левой/правой в данной строке
3) делает его доп. контентом, а не самим контентом, т. е. родитель будет считаться пустым если в нём не будет элементов без float'a, div без float'a растянет свой background даже по float'ным элементам, float'ные элементы берут проценты от того родителя, у которого задана ширина/высота (смотря что указывается)

На данный момент задача такая - без таблиц сделать равные по высоте блоки. Ничего не получается. Также хотелось бы узнать, почему overflow: hidden убирает фон за пределами div'a без float'a (а рядом div с float'ом), если ширина у div'a равна всей ширине род. блока. И ещё хочу узнать, почему display: table-cell автоматически ставит <br> после каждого float'ированного элемента.

Добавлено через 48 секунд
Crudelis, если это всего лишь обткание, то как бы ты сделал сайт с меню на блоках? Это ведь столбцы.

Добавлено через 1 минуту
Также, кст., если будут только float'ные элементы то и общий background задать не удастся, т. к. род. блок не будет растягиваться под "пустой" контент. Хотелось бы узнать, как избежать этого.
0
Alorian
691 / 531 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
17.09.2010, 15:09 4
Цитата Сообщение от Hagrael Посмотреть сообщение
На данный момент задача такая - без таблиц сделать равные по высоте блоки. Ничего не получается.
Мне кажетяс бессмысленная задача. Я знаю пару решений, одно с изменением свойства display, другое overflow:hidden.
Про первое можно много где почитать, про второе я упоминал здесь:
http://www.cyberforum.ru/html/thread...tml#post854429
0
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
17.09.2010, 15:39  [ТС] 5
Alorian, ссылка та не работает, а как работать с overflow: hidden и уж тем более margin-bottom: 32767px я не понял.
Родился ещё один вопрос: почему добавляют пустой div с clear: left, а не указывают у того div'a, который должен игнорировать обтекание clear: left?
0
Crudelis
Шаровик затейник
683 / 432 / 78
Регистрация: 06.05.2010
Сообщений: 1,109
17.09.2010, 16:02 6
Цитата Сообщение от Hagrael Посмотреть сообщение
то как бы ты сделал сайт с меню на блоках? Это ведь столбцы.
меню на блоках:
HTML5
1
2
3
4
5
6
<ul>
<li>ссылка</li>
<li>ссылка</li>
<li>ссылка</li>
<li>ссылка</li>
</ul>
CSS
1
li{float:left;}
0
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
17.09.2010, 17:08  [ТС] 7
Crudelis, я имею в виду страницу с меню, а не само меню) Т. е. как расположить меню и контент? И чтоб контент и меню были по высоте одинаковыми блоками.

Добавлено через 7 минут
Немного разобрался с логикой. background растягивается, потому что блок будет обтекаться, т. е. если высота div'a без float'a будет больше, чем div'a с float'ом, то div без float'a будет его обтекать даже снизу. Это влияет на его ширину. А что касается его центрирования - браузер понимает, что элемент обтекает другой элемент, и делает выравнивание по свободному месту.

Добавлено через 2 минуты
А если указан scroll, то тогда элемент в любом случае обтекать др. элемент снизу не будет.

Добавлено через 49 минут
Хм... странно работает этот код:
HTML5
1
2
<div style="float: left;">is float</div>
<div style="background: #009900; overflow: hidden;">no float<br>in this div</div>
Почему-то здесь ширина меняется! И второй div не обтекает первый снизу! В колонках это то что надо, но почему overflow здесь убирает ширину? Он же решает, что делать с избыточным текстом, а в данном случае он уменьшает ширину! И таким образом 2-й div никаким образом не воздействует на 1-й. Но ведь это свойство не имеет права управлять шириной! Почему это происходит?
0
Crudelis
Шаровик затейник
683 / 432 / 78
Регистрация: 06.05.2010
Сообщений: 1,109
17.09.2010, 17:14 8
Hagrael, почему второй блок должен обтекать первый с низу, если стоит float:left? Второе, ширина второго блока никак не зависит от ширины первого

Добавлено через 1 минуту
если вы сделает так:
HTML5
1
2
<div style="float: left; height:40px;">is float</div>
<div style="background: #009900; overflow: hidden; height:40px;">no float<br>in this div<br>in this div<br>in this div</div>
то overflow: hidden будет таки скрывать текст, но второй блок не станет под первым из-за float:left
0
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.09.2010, 08:26  [ТС] 9
Crudelis, под обтеканием снизу я имел в виду то, что после того как закончится обтекание с боков, начнётся обтекание элемента снизу. В этом проблем нет.
Но проблема в том, что код, который я привёл выше, убирает растяжение background'a на соседний div и отменяет обтекание снизу. Попробуй поставить overflow: visible и ты поймёшь о чём я говорю.

Добавлено через 4 минуты
Вопрос с одинаковой высотой также остаётся.

Добавлено через 15 часов 5 минут
Итак, по поводу того, как сделать так, чтобы контент страницы был резиновым. Надо ставить overflow: hidden у контента и float ему не добавлять. Тогда всё будет так, как надо - по колонкам. Логика тут вот какая: overflow оказывается не только управляет тем, что за пределами элемента, а ещё и перед этим меняет ширину элемента и делает её такой, какой она должна быть в строке. Т. е. в данном случае элемент-контент обтекал бы блоки и снизу тоже, что нелогично, если рассматривать эту группу как строчку. Вот поэтому я пришёл к такому выводу. А вообще растягивается div по всем соседним float'ным div'ам потому что он будет проходить у них снизу и ширина должна следственно растянуться на всю род. ширину. table-cell всё сжимает. Надо объязательно задавать ему ширину для того, чтобы float'ные элементы не переносились. Но как быть с одинаковой высотой? И нельзя ли сказать table-cell чтобы тот не переносил элементы с float'ом на новую строку?
0
lesha_firs
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
18.09.2010, 14:55 10
1 table-cell не работает НЕ в одном ie используя я его очень и очень редко
2 для резиновой верстки я не разу в жизни не применял overflow: hidden;
0
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.09.2010, 16:30  [ТС] 11
lesha_firs, это заменяет все margin'ы.

Добавлено через 15 минут
Цитата Сообщение от lesha_firs Посмотреть сообщение
table-cell не работает НЕ в одном ie
А как сжать div по контенту? float что ли применять? По мне так за зря создавать float... Это черевато последствиями.
0
lesha_firs
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
18.09.2010, 16:32 12
Цитата Сообщение от Hagrael Посмотреть сообщение
А как сжать div по контенту?
Что вы понимаете под словом сжать?
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.09.2010, 16:42  [ТС] 13
lesha_firs, "обтягивать", т. е. могли же литр молока налить в 2-хлитровую банку, но они эту 2-хлитровую банку сжимают по содержимому - молоку в данном случае, и она становится "сжатой по коненту" (ну в жизни просто берут и заменяют на литровую, и никаких сжатий нет ). Вот что я имел в виду под словом "сжать".
0
lesha_firs
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
18.09.2010, 16:47 14
Если правильно понял!
Вам проста нужно чтоб текст добовлялся и div тянулся в низ для этого просро уберите высоту дива и все а ширину авто
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.09.2010, 16:48  [ТС] 15
lesha_firs, вы правильно меня поняли, но мне нужно чтобы это происходило с шириной =)
0
lesha_firs
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
18.09.2010, 16:51 16
width:auto
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
18.09.2010, 20:16  [ТС] 17
это не то. Блок-то растягивается на всю ширину род. элемента, а мне надо чтоб сжимался по содержимому.

Добавлено через 3 часа 5 минут
Эх... придётся вернуться к табличкам...
0
lesha_firs
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
19.09.2010, 07:30 18
Цитата Сообщение от Hagrael Посмотреть сообщение
это не то. Блок-то растягивается на всю ширину род. элемента, а мне надо чтоб сжимался по содержимому.
у вас гдето ошибка у меня все хорошо
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
19.09.2010, 09:09  [ТС] 19
lesha_firs, можете показать код?
Вот мой:
HTML5
1
<div style="width: auto; background: green;">SHORT?</div>
div растягивается на всю ширину блока.
0
lesha_firs
143 / 109 / 13
Регистрация: 13.02.2010
Сообщений: 522
19.09.2010, 09:16 20
Цитата Сообщение от Hagrael Посмотреть сообщение
lesha_firs, можете показать код?
Вот мой:
HTML5
1
<div style="width: auto; background: green;">SHORT?</div>
div растягивается на всю ширину блока.
А сори я не так делал а вот так=)

HTML5
1
<div style="background:red;height:40px;"><span style="background:green">SHORT?</span></div>
1
19.09.2010, 09:16
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.09.2010, 09:16

float
У меня один div обтекает другой, их родитель равняется на высоту div'a без...

float в float'е
У меня такая фигня на сайте. Меню выравнивается слева (float:left) и текст тоже...

Float
Нужно сделать вот так: http://i.imgur.com/myU8F8R.png Вот что я написал: ...


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

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

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