Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2010, 18:34
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

display:inline
есть несколько элементов div, вложенных во внешний div, который находится в потоке
Пока эти div блочные - они все укладываются один под другим во внешнем div.
<head>
         <style>
             .cl {width:50px; height:50px; background-color:red;}
            body { margin:0; padding: 0px}
        </style>
  </head>
  <body>
      <div id="outerDiv" style="width:300px; height:90px;">
      <div class="cl"></div>
      <div class="cl"></div>
      <div class="cl"></div>
      </div>
  </body>


Почему, если я ставлю им display:inline, они исчезают ?
В IE - они не исчезают, это баг Firefox?

<head>
         <style>
             .cl {width:50px; height:50px; background-color:red; display:inline}
            body { margin:0; padding: 0px}
        </style>
  </head>
  <body>
      <div id="outerDiv" style="width:300px; height:90px;">
      <div class="cl"></div>
      <div class="cl"></div>
      <div class="cl"></div>
      </div>
  </body>
Ответить с цитированием
  #2 (permalink)  
Старый 22.03.2010, 18:44
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Они не исчезают, а схлопываются, т.к. в них нет контента. А ширины и высоты у инлайновых элементов нет.
Ответить с цитированием
  #3 (permalink)  
Старый 22.03.2010, 19:01
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Ага,
"Важным свойством строчных боксов является то, что у них есть свой собственный размер. Он складывается из размера шрифта (для букв), собственных размеров картинок, расстояния между строками. Это означает, что браузер при раскладке строчных боксов определяет их размер сам, без указания всяких width и height"
=>
фон увидим, если набьем строчные боксы строчным же содержимым (буковками))
Тогда это баг IE, что он отображает несхлопнувшиеся строчные div , если им задать размер.
Ответить с цитированием
  #4 (permalink)  
Старый 22.03.2010, 19:53
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Shaci,
Вы это с W3C взяли? Речь идет про анонимные текстовые блоки, а если инлайновый элемент пуст, или содержит только пробельные символы, в нем не содержится ни одного такового.
Ответить с цитированием
  #5 (permalink)  
Старый 22.03.2010, 20:17
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Сообщение от subzey Посмотреть сообщение
Shaci,
Вы это с W3C взяли?
http://softwaremaniacs.org/blog/2005...s-layout-flow/
Цитата:
Речь идет про анонимные текстовые блоки
Так там вроде и про текстовые и про картинки, то есть про все строчные боксы, и про то , что браузер определит их размер сам.
Сообщение от subzey
, а если инлайновый элемент пуст, или содержит только пробельные символы, в нем не содержится ни одного такового.
Сообщение от Shaci
фон увидим, если набьем строчные боксы строчным же содержимым (буковками))
Ну да, если инлайновый элемент пуст, то он схлопывается, а если содержит текстовый блок, то будет определен его размер и будет видно его фон.
<head>
         <style>
             .cl {width:50px; height:50px; background-color:red; display:inline}
            body { margin:0; padding: 0px}
        </style>
  </head>
  <body>
      <div id="outerDiv" style="width:300px; height:90px;">
      <div class="cl">param</div>
      <div class="cl">pam</div>
      <div class="cl">pam</div>
      </div>
  </body>


Просто в IE он у меня показывает пустые inline блоки того размера, который я им указал через width и height, т.е. они не схлопываются
Вроде так.
Ответить с цитированием
  #6 (permalink)  
Старый 22.03.2010, 20:18
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Shaci,
извините, кажется, мы говорим об одном и том же, и я просто Вас не понял.
Ответить с цитированием
  #7 (permalink)  
Старый 22.03.2010, 20:20
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Цитата:
кажется, мы говорим об одном и том же
Да, похоже на то

Там даже видно, что пробельные символы не входят, на них фона нет.
Ответить с цитированием
  #8 (permalink)  
Старый 23.03.2010, 17:06
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

Сообщение от Shaci Посмотреть сообщение
Там даже видно, что пробельные символы не входят, на них фона нет.
Они не входят в div'ы, потому и фона нет:

<head> 
         <style> 
             .cl {width:50px; height:50px; background-color:red; display:inline} 
            body { margin:0; padding: 0px} 
        </style> 
  </head> 
  <body> 
      <div id="outerDiv" style="width:300px; height:90px;"> 
      <div class="cl"> param </div> 
      <div class="cl"> pam </div> 
      <div class="cl"> pam </div> 
      </div> 
  </body>
Ответить с цитированием
  #9 (permalink)  
Старый 23.03.2010, 17:30
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Сообщение от e1f Посмотреть сообщение
Они не входят в div'ы, потому и фона нет:
Да, это я спутал.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск