Jump to content
  • 0

Float in Float

TonKhaO

Asked by TonKhaO,

 Share

Question

TonKhaO Explorer

TonKhaO

Posted
Posted

Привет всем! Вот недавно для себя обнаружил еще 1 странное поведение ие6,7. Вот решил поделиться с вами, возможно конечно кто-то уже в теме, но думаю тем не менее некоторым тоже будет полезно узнать :ph34r:

Скажем есть внешний блок, он зафлоачен лефтом!

В нем есть 3 блока (как бэ мы делаем растягивающуюся менюху с закругленными краями по бокам, высота фиксированная).

Эти 3 блока (включая правый) нужно все флоатить по лефту! Если правый блок (уголок) зафлоатить райт, то в ие 6,7 это растянет внешний блок (в данном примере .menu_item) с флоатом лефт на всю ширину экрана.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float in float</title>


<style>

.menu_item {

			background: #d4d4d4;
			float: left;
			display: inline;
			margin-right: 10px;
			padding: 10px;

}


.menu_item_left {

				 background: #ffc4c4;
				 float: left; 
				 display: inline;
				 width: 20px;
				 height: 20px;

}


.menu_item_center {

				 background: #a3cfa2;
				 float: left;
				 display: inline;

}


.menu_item_right {

				 background: #ffc4c4;
				 float: left; 
				 /*float: right - вот так делать не нужно :-) */
				 display: inline;
				 width: 20px;
				 height: 20px;

}


</style>


</head>

<body>

<div class="menu_item">

	 <div class="menu_item_left"></div>

	 <div class="menu_item_center">menu 1</div>

	 <div class="menu_item_right"></div>

</div>

<div class="menu_item">

	 <div class="menu_item_left"></div>

	 <div class="menu_item_center">menu 2 menu 2</div>

	 <div class="menu_item_right"></div>

</div>

<div class="menu_item">

	 <div class="menu_item_left"></div>

	 <div class="menu_item_center">menu 3 menu 3 menu 3</div>

	 <div class="menu_item_right"></div>

</div>

</body>
</html>

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
mishka Explorer

mishka

Posted
Posted (edited)

Ну я как ты выразился "уже в теме" :ph34r:

Поэтому раскрою главное правило - если родитель флотнут вправо, то дочерние элементы нужно флотать влево. Это если хочешь резиновой ширины.

Edited by mishka2
Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
Ну я как ты выразился "уже в теме" :)

Поэтому раскрою главное правило - если родитель флотнут вправо, то дочерние элементы нужно флотать влево. Это если хочешь резиновой ширины.

опа а вот это интересно, попробую на ждосуге отпишусь сюда же :ph34r:

в любом случае получается дочерние элементы всегда в таких случаях нужно флоатить влево

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted
Ну я как ты выразился "уже в теме" :ph34r:

Поэтому раскрою главное правило - если родитель флотнут вправо, то дочерние элементы нужно флотать влево. Это если хочешь резиновой ширины.

А что это даст при и без того 100% ширине?

Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
А я вообще не въехал в суть темы, что именно нужно получить и почему это не выходит?

ну смотри например когда есть некие пункты меню, но они не по-вертикали а по-горизонтали, и у этих пунктов закругленные края, <li> и списки для пунктов уже не подходят ибо я не могу в <li> запихивать несколько дополнительных блоков с правыми и левыми краями, вот и получается внешний див зафлоаченный по лефту и уже в нем 3 дочерних с уголками и средней частью, возможно это не семантично с точки зрения того что менюхи и пукнты менюх обычно делают именно списками, но вот другого пути я пока не знаю :ph34r:

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

Posted
Posted
ну смотри например когда есть некие пункты меню, но они не по-вертикали а по-горизонтали, и у этих пунктов закругленные края, <li> и списки для пунктов уже не подходят ибо я не могу в <li> запихивать несколько дополнительных блоков с правыми и левыми краями, вот и получается внешний див зафлоаченный по лефту и уже в нем 3 дочерних с уголками и средней частью, возможно это не семантично с точки зрения того что менюхи и пукнты менюх обычно делают именно списками, но вот другого пути я пока не знаю :ph34r:

Думаю лучше один раз увидеть, чем стораз услышать, картинка есть ?

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)
А что это даст при и без того 100% ширине?

Под "резиновой шириной" я подразумевал ширину по содержимому.

При чем тут 100%?

ибо я не могу в <li> запихивать несколько дополнительных блоков с правыми и левыми краями

Почему не можешь? что этому препятствует?

Если чтото флотнул вправо, то дочерние элементы можна флотнуть только влево.

Edited by mishka2
Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
Почему не можешь? что этому препятствует?

Если чтото флотнул вправо, то дочерние элементы можна флотнуть только влево.

как почему, я не помню щас не приведу но где то точно читал что по семантике в <li> можно максимум пихать такие инлайновские теги как <a> или <span> а тут получится что пихаю как бы блоки (правда отфлоаченные) :ph34r:

я имею ввиду вот например если привести семантику создания ссылок, например если я напишу так

<a href="#"><div>ссылка</div></a> - меня примут за ненормального :-)

<a href="#">ссылка</a> - правильно

вот тоже самое мне кажется со спанами

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)
как почему, я не помню щас не приведу но где то точно читал что по семантике в <li> можно максимум пихать такие инлайновские теги как <a> или <span>

Чушь

Также почему ты решил что только блоки можна флотать и бг на них цеплять?

Чем спан отличается от блока, в этом случае?

Edited by mishka2
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
по семантике в <li> можно максимум пихать такие инлайновские теги как <a> или <span>
С <p> не перепутали случайно? В <li> блоки пихать можно. Собственно, возможность вложенных списков на этом строится. Плюс редко, но бывает необходимость сделать, например, список блочных цитат с подписями или ленту новостей с заголовками и анонсами...

Вот в <a> пихать блоки можно только в HTML5 (в браузерах это уже работает, но в IE может глючить курсор при наведении).

Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
С <p> не перепутали случайно? В <li> блоки пихать можно. Собственно, возможность вложенных списков на этом строится. Плюс редко, но бывает необходимость сделать, например, список блочных цитат с подписями или ленту новостей с заголовками и анонсами...

Вот в <a> пихать блоки можно только в HTML5 (в браузерах это уже работает, но в IE может глючить курсор при наведении).

вы хотите сказать что можно так делать? :

<li>

<div></div>

<div></div>

<div></div>

</li>

и на сколько это семантично?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept