По сути, вы добавили больше беспорядка в свой код, что создает больше путаницы, поэтому сначала я пытаюсь удалить беспорядок, который мешает понять реальную проблему.
Прежде всего, мы должны установить, что это реальный вопрос?
Вот почему inline-block
элемент " " толкается вниз.
Теперь мы начинаем понимать это и сначала убираем беспорядок.
1 -
Почему бы не дать всем трем элементам одинаковую ширину границы?
Давайте дадим это.
2 - Имеет ли плавающий элемент какую-либо связь с выталкиваемым вниз элементом inline-block? Нет, это не имеет к этому никакого отношения.
Итак, мы полностью удалили этот div . И вы наблюдаете такое же поведение выталкиваемого вниз элемента inline-block.
Наступает очередь некоторой литературы понять идею линейных блоков и того, как они расположены в одной строке, особенно внимательно прочитайте последний абзац, потому что там лежит ответ на ваш вопрос.
Базовая линия 'inline-block' является базовой линией его последнего блока строки в нормальном потоке, если только у него нет ни блоков in-flow line, либо если его свойство 'overflow' не имеет вычисленного значения, отличного от 'visible', в В этом случае базовой линией является нижний край поля.
Если вы не уверены в базовых показателях, вот краткое объяснение в простых словах.
Все символы, кроме «gjpqy», написаны на базовой линии, вы можете думать о базовой линии, как будто вы рисуете простую горизонтальную линию, аналогичную подчеркиванию прямо под этими «случайными символами», тогда это будет базовая линия, но теперь, если вы напишите любой из «gjpqy» символ (ы) в той же строке, тогда нижняя часть этих символов будет ниже линии.
Итак, мы можем сказать, что все символы, кроме «gjpqy», написаны полностью выше базовой линии, в то время как некоторая часть этих символов написана ниже базовой линии.
3 - Почему бы не проверить, где находится базовая линия нашей линии? Я добавил несколько символов, которые показывают базовую линию нашей линии.
4 - Почему бы не добавить некоторые символы в наши элементы div, чтобы найти их базовые линии в элементе div? Здесь некоторые символы добавлены в div для уточнения базовой линии .
Теперь, когда вы понимаете базовую линию, прочитайте следующую упрощенную версию базовой линии встроенных блоков.
i) Если для рассматриваемого inline-block его свойство переполнения установлено в visible (что по умолчанию, поэтому устанавливать его не нужно). Тогда его базовая линия будет базовой линией содержащего блока линии.
ii) Если у рассматриваемого inline-блока свойство переполнения установлено на ДРУГОЕ, чем видимое. Тогда его нижнее поле будет находиться на базовой линии линии вмещающего ящика.
Теперь посмотрите на это еще раз, чтобы уточнить вашу концепцию, что происходит с зеленым div . Если все еще есть какая-либо путаница, то здесь добавляется больше символов рядом с зеленым div, чтобы установить базовую линию содержащего блока, и зеленая базовая линия div выравнивается.
Что ж, теперь я утверждаю, что у них одинаковые базовые показатели? ПРАВО?
5 - Тогда почему бы не перекрыть их и посмотреть, подходят ли они друг другу? Итак, я привожу третий div-слева: 35px; проверить, имеют ли они сейчас ту же базовую линию ?
Теперь мы доказали нашу первую точку зрения.
Что ж, после объяснения первой точки вторая точка легко усваивается, и вы видите, что у первого элемента div, у которого свойство переполнения установлено на значение, отличное от visible (hidden), есть нижнее поле на базовой линии линии.
Теперь вы можете сделать пару экспериментов, чтобы проиллюстрировать это.
- Установить первый переполнение div: видимый (или удалить его вообще) .
- Установить переполнение второго div: кроме видимого .
- Установите оба переполнения div: кроме видимого .
Теперь верни свой беспорядок и посмотри, все ли у тебя хорошо.
- Верните ваш плавающий div (конечно, нужно
увеличить ширину тела). Вы видите, что это не имеет никакого эффекта.
- Верните те же странные поля .
- Установите для зеленого div переполнение: видно, как вы задали в своем вопросе (это смещение происходит из-за увеличения ширины границы с 1 до 5 пикселей, поэтому, если отрегулировать отрицательный угол влево, вы увидите, что проблем нет)
- Теперь удалите дополнительные символы, которые я добавил, чтобы помочь в понимании . (и конечно удалить отрицательный левый)
- Наконец, уменьшите ширину тела, потому что нам больше не нужен более широкий.
И теперь мы вернулись туда, откуда начали.
Надеюсь, я ответил на ваш вопрос.