Полезная информация

В мире Mozilla происходит много интересных событий. Но вам не нужно постоянно посещать новостные сайты, чтобы быть в курсе всех изменений. Зайдите на ленту новостей Mozilla Россия.

№104-08-2011 21:15:49

haveFun
Участник
 
Группа: Members
Зарегистрирован: 04-08-2011
Сообщений: 4
UA: Firefox 5.0

мистика при верстке

Выделить код

Код:

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: red; width: 256px;">
            123
        </div>
        <div style="background: green; width: 256px">
            456
        </div>
</div>
</div>

bgvluavdgrjvbxyxhuclbqidnajrkx.JPG
529490e549f7.jpg

??????
ps: осел 6.0 и то корректнее отображает.

Отредактировано haveFun (04-08-2011 21:18:01)

Отсутствует

 

№204-08-2011 21:45:24

Йцукен
  
 
Группа: Extensions
Зарегистрирован: 05-06-2008
Сообщений: 4799
UA: Firefox 5.0

Re: мистика при верстке

haveFun
Верхняя картинка не загружается. Что на ней?

Отсутствует

 

№304-08-2011 22:47:02

mcfly
Робот! :)
 
Группа: Members
Откуда: Russia
Зарегистрирован: 01-10-2010
Сообщений: 288
UA: Firefox 5.0

Re: мистика при верстке

Йцукен пишет

haveFunВерхняя картинка не загружается. Что на ней?

Они по-моему одинаковые

Отсутствует

 

№404-08-2011 23:29:24

IOpeH
Участник
 
Группа: Members
Зарегистрирован: 08-04-2007
Сообщений: 27
UA: Firefox 3.6

Re: мистика при верстке

haveFun, а что не так?

Отсутствует

 

№505-08-2011 02:43:51

haveFun
Участник
 
Группа: Members
Зарегистрирован: 04-08-2011
Сообщений: 4
UA: Firefox 5.0

Re: мистика при верстке

изображения одинаковые, просто форум, видимо, блочит ссылку на хостинг первого.
ладно расскажу.
параметр второго блока с цифрами 123 "float: left;" как бы намекает на то, что блоки 123 и 456 должны быть на одном уровне, а не друг под другом.
на скрине мы видим невменяемую магию компиляции нашего любимого фаерфокса.

это наверное прежде всего разработчиков касается. бед очень даже неадекватный.:/

кстати замечу что float у огнелиса периодически работает. я лишь привел пример того, когда он по неизвестной причине отказывается пахать.
какие будут соображения по этому поводу?

упд: если кого-то смущает ширина, что при таких параметрах:

Выделить код

Код:

<div align="center">
    <div style="text-align: center; background: grey; width: 600px;">
        <div style="background: black; color: white; width: 580px;">
            000
        </div>
        <div style="float: left; background: red; width: 250px;">
            123
        </div>
        <div style="background: green; width: 250px">
            456
        </div>
</div>

результат абсолютно такой же.

Отредактировано haveFun (05-08-2011 02:50:37)

Отсутствует

 

№605-08-2011 04:11:43

IOpeH
Участник
 
Группа: Members
Зарегистрирован: 08-04-2007
Сообщений: 27
UA: Firefox 3.6

Re: мистика при верстке

haveFun, не эксперт в области флоатинга, но я понимаю эту ситуацию так: при задании блочному элементу float:left; он начинает отображаться как display:inline-block; с выравниванием по соответсвующей стороне;
задайте для 456 float:left; или display:inline-block; и 123 и 456 будут на одной строке.
тут дело заключаестя в том, что вы вроде и ограничели блок 456 по ширине и он должен влезать в оставшееся свободное место на строчке выше, но элемент все равно остается блочным и занимает 100% свободного пространства и не может поместиться на стоке выше.

Отсутствует

 

№705-08-2011 15:18:19

banbot
Moderator
 
Группа: Moderators
Зарегистрирован: 23-12-2007
Сообщений: 5245

Re: мистика при верстке

Тема перенесена из форума «Поддержка пользователей» в форум «Разработка».


Do you feel lucky, punk?

Отсутствует

 

№805-08-2011 21:50:28

eug888
Участник
 
Группа: Members
Зарегистрирован: 11-01-2011
Сообщений: 5
UA: Firefox 5.0

Re: мистика при верстке

<span> поставь вместо <div>. <div> переносится на новую строку (если не заданы абсолютные параметры). 1 класс 2-я четверть.

Отредактировано eug888 (05-08-2011 21:59:06)

Отсутствует

 

№906-08-2011 16:49:24

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508
UA: Nightly 8.0

Re: мистика при верстке

Прошу прощения за неверную информацию.

Ничего не понимаю, честно.

Отредактировано Al_H (06-08-2011 23:27:17)

Отсутствует

 

№1006-08-2011 22:43:18

IOpeH
Участник
 
Группа: Members
Зарегистрирован: 08-04-2007
Сообщений: 27
UA: Firefox 3.6

Re: мистика при верстке

Al_H пишет

256px+256px>550px

хорошая математика :D

Отсутствует

 

№1106-08-2011 23:15:30

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508
UA: Nightly 8.0

Re: мистика при верстке

Ой, извините. И правда. Сейчас гляну, как код себя ведет.
Вообще-то мы в таких случаях применяли margin-left: 257px;

Отсутствует

 

№1206-08-2011 23:47:55

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508
UA: Nightly 8.0

Re: мистика при верстке

Так. Есть предположения.

Выделить код

Код:

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: red; width: 256px;">
            123
        </div>
        <div style="background: green; width: 256px; margin-left: 257px;">
            456
        </div>
    </div>
</div>

Вот так работает.

Выделить код

Код:

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: red; width: 256px;">
            123
        </div>
        <div style="background: green;">
            456
        </div>
    </div>
</div>

И так.

У меня есть рабочее предположение, полностью оправдывающее Файрфокс.
Делаю эксперимент. В Фоксе загружаю первый из кусков кода в этом посте (margin-left и width). В Firebug отключаю margin, приводя код к исходному. Получаю:
http://d.pr/OyP9
Теперь беру исходный код (из поста №1 этой темы) и меняю там одно число:

Выделить код

Код:

width: 260px;

– уже интересно, да? То есть зеленый блок начинается с верхнего левого угла флоата, как и должен по спецификации.

Выделить код

Код:

width: 320px;

Всё. Теперь знаю.

Флоат действует на текст следующего блока, а не на сам блок.
То есть, если мы не задаем ширину для зеленого блока, сам блок начинается там же, где и флоат, ширина у него считается оттуда же, а текст переносится к правой границе флоата, его обтекая. Так?
Теперь мы делаем блок (в обратном порядке) 320px. Блок зеленый, не будучи флоатом, естественно, не выстраивается справа от предыдущего, а начинается там же где и предыдущий, и ширину имеет указанную, только текст ютится в оставленном пространстве.
Уменьшаем блок до той же ширины, что флоат, или до меньшей. Теперь, начинаясь там же, он должен перейти на следующую строчку.
Иллюстрирую:
testcase
http://cl.ly/0f1e0R1b2R3q2H3r0P1B

Выделить код

Код:

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: transparent; border: 2px dashed red; border-radius: 5px; -moz-border-radius: 5px; width: 256px;">
            123
        </div>
        <div style="background: green; width: 220px;">
            456
        </div>
    </div>
</div>

P.S. Классические способы организации колонок при вёрстке флоатами:
(+) внешнее поле – у второго (основного, без указания ширины) блока задаётся margin-left, больший (равный) ширины первого блока – флоата (и тут вступает 3пиксельный баг ИЕ, который устраняется разными способами), при этом флоат не занимает места в потоке документа по вертикали в смысле смешения элементов, и охватывающий блок имеет высоту второго, неплавающего блока (точнее, заканчивается у его нижней границы), что может создавать проблемы в некоторых версиях ИЕ в некоторых режимах, в Фоксе, Сафари, Опере, Хроме, etc
(+) обтекание – у второго (основного, без указания ширины) блока текст заплывает под первый блок, что ценно для врезок
(+) два флоата – левый и правый (правый и левый), ширина в процентах, часто во избежание разночтений по 49% или 48%, и обе колонки не занимают места в потоке документа по вертикали, что во многих (современных) браузерах делает охватывающий блок имеющим высоту 0, то есть, как правило, невидимым, неощутимым и необнаружимым, куда исчезает и фон, что может создавать проблемы

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

Если есть вопросы – пишите.

Отредактировано Al_H (10-08-2011 20:11:52)

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]