Есть ли простой способ определить, какие факторы влияют на размер элемента HTML?
Например, у меня есть ситуация, когда у меня есть что-то вроде этого (надуманного) примера:
<div id = "outer" style = "margin: auto>
<div id = "inner1" style = "float: left">content</div>
<div id = "inner2" style = "float: left">content</div>
<div id = "inner3" style = "float: left">content</div>
<br style = "clear: both"/>
</div>
где для каких-либо элементов не задана ширина, и я хочу, чтобы #inner1, #inner2 и #inner3 отображались рядом друг с другом по горизонтали внутри #outer, но происходит то, что #inner1 и #inner2 появляются рядом друг с другом, а затем #inner3 оборачивается на следующую строку.
На самой странице, где это происходит, происходит гораздо больше, но я очень внимательно проверил все элементы с помощью Firebug и не понимаю, почему элемент #inner3 не отображается в той же строке, что и #inner1 и #inner2, и вызывает #outer стать шире.
Итак, у меня вопрос: есть ли способ определить размер Почему браузера #outer таким, какой он есть, или почему он решил обернуть #inner3, даже если есть много места, чтобы поместить его в предыдущую «строку»? Обнажая конкретные решения этой проблемы, какие советы или методы вы, хардкорные HTML / CSS / веб-разработчики, можете дать бедному разработчику серверной части, который обнаружил, что работает над интерфейсом?
Ответы 4
Попробуйте Плагин веб-разработчика для Firefox. В частности, параметры Информация -> Размер блока дисплея и Outline -> Элементы уровня блока Outline. Это позволит увидеть границы ваших элементов и их размер так, как их видит Firefox.
На вкладке CSS Firebug вы можете увидеть, какие правила стиля применяются к выбранным элементам в каскадном порядке. Это может помочь или не помочь вам в решении вашей проблемы.
Я предполагаю, что что-то в содержимом # inner3 заставляет его переноситься ниже первой строки, а размер #outer просто увеличивается, чтобы вместить меньшее необходимое пространство.
Итак, я нашел ответ в моем конкретном случае - намного дальше в DOM был div, в котором были установлены определенные левые / правые поля, которые сжимали его и все, что в нем.
Но суть вопроса в том, как можно легко отладить подобные проблемы? Что было бы идеально в этом случае, например, было бы что-то в Firebug, которое при наведении курсора на размер элемента на панели макета отображало бы всплывающую подсказку, которая говорит что-то вроде «ширина ограничена внешним элементом X; высота ограничена стилем Z на элементе. Q "или" ширина, вносимая внутренними элементами A, B и C ".
Мне жаль, что у меня не было времени написать что-то подобное, хотя я подозреваю, что будет сложно (если не невозможно) получить эту информацию из движка рендеринга Firefox.
Было бы неплохо иметь инструмент, который мог бы точно сказать вам, в чем заключаются все ваши проблемы с макетом, но в этом случае браузер отображал страницу именно так, как она должна быть - общая ширина плавающих элементов превышает ширину содержащего блока, поэтому последняя переходит на новую строку (это немного отличается от проблемы с раскрытием поля / поплавка в IE6, которая обычно вызывается содержимым внутри поплавка, а не самими поплавками). Итак, в этом случае с вашей страницей все было в порядке.
Для отладки нужно просто пройтись по вашему HTML в Firebug и выяснить, какие дочерние элементы блока превышают ширину блока. Firebug предоставляет для этого много информации, хотя иногда мне нужно использовать калькулятор. Я думаю, что то, что вы описали о возможности видеть, какие элементы ограничивают другие элементы, было бы просто слишком сложным и подавляющим, особенно для элементов, удаленных из обычного потока (таких как поплавки или позиционированные элементы).
Кроме того, более глубокое понимание того, как макет CSS также очень помогает. Это может быть довольно сложно.
Например, обычно рекомендуется назначать явную ширину плавающим элементам - спецификация W3C CSS2 утверждает, что плавающие элементы должны иметь явную ширину, и не дает инструкций о том, что делать без нее. Я думаю, что большинство современных браузеров используют метод «сжатия по размеру» и ограничивают себя шириной содержимого. Однако это не гарантируется в старых браузерах, и в чем-то вроде макета с 3 столбцами вы будете зависеть от ширины содержимого внутри плавающих объектов.
Кроме того, если вы стремитесь к совместимости с IE6, существует ряд ошибки, связанные с float, которые также могут вызвать аналогичные проблемы.
Это существует, вы можете обрисовать элементы div с помощью панели инструментов веб-разработчика. Он покажет вам границы всех div на странице, чтобы вы могли видеть, что и что ограничивает.