Почему этот встроенный блок блокируется вниз?

Ниже приведен мой код, и я хочу понять, что почему #firstDiv толкается вниз всеми браузерами. Я действительно хочу понять внутреннюю работу того, почему ее толкают вниз, а не тянут ее вверх так или иначе. (и я знаю, как выровнять их вершины:))

И я знаю, что его переполнение: скрытое, которое вызывает его, но не уверен, почему его нажатие этого div вниз.

<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
</div>

body{
    width: 350px;
    margin: 0px auto;
}
#container {
    border: 15px solid orange;   
}
#firstDiv{
    border: 10px solid brown;     
    display:inline-block;
    width: 70px;      
    overflow:hidden;  
}
#secondDiv{
    border: 10px solid skyblue;         
    float:left;
    width: 70px;     
}
#thirdDiv{
    display:inline-block;
    border: 5px solid yellowgreen;    
}

http://jsfiddle.net/WGCyu/.

Ответ 1

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

Прежде всего, мы должны установить, что представляет собой реальный вопрос? Таким образом, элемент < <20 > "нажат вниз".

Теперь мы начинаем понимать это и сначала удалять беспорядок.

1 - Почему бы не дать всем трем divs такую ​​же ширину границы? Пусть дайте это.

2 - Имеет ли плавающий элемент какое-либо соединение с входящим элементом строкового блока вниз? Нет, это не имеет никакого отношения к этому.

Итак, мы удалили этот div вообще. И вы наблюдаете одно и то же поведение элемента inline-block, которое сдвигается вниз.

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

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

Если вы не уверены в базовом уровне, вот краткое объяснение простыми словами.

Все символы, кроме "gjpqy", записываются на базовой линии, вы можете думать о базовой линии, как если бы вы нарисовали простую горизонтальную линию, такую ​​же, как подчеркивание прямо под этими "случайными символами", тогда это будет базовая линия, но теперь, если вы напишете любой из 'gjpqy' в той же строке, тогда нижняя часть этих символов будет падать ниже линии.

Итак, мы можем сказать, что все символы, кроме "gjpqy", полностью написаны над базовой линией, а часть этих символов написана ниже базовой линии.

3 - Почему бы не проверить, где находится базовая линия нашей линии? Я добавил несколько символов, которые показывают базовую линию нашей линии.

4 - Почему бы не добавить некоторые символы в наши div тоже, чтобы найти их базовые линии в div? Здесь некоторые символы добавлены в divs для уточнения базовой линии.

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

i) Если встроенный блок имеет свойство переполнения, установленное на видимое (по умолчанию это не нужно устанавливать). Тогда его базовая линия будет базовой линией содержащего блока строки.

ii) Если встроенный блок имеет свойство переполнения, то оно имеет значение OTHER, чем видимое. Тогда его нижнее поле будет находиться на базовой линии строки, содержащей поле.

  • Первая точка в деталях

Теперь посмотрите на это еще раз, чтобы прояснить свою концепцию, что происходит с зеленым div. Если еще какая-то путаница, то здесь добавлено больше символов, близких к зеленому div, чтобы установить базовый уровень содержащего блока и выравнивается базовая линия зеленого div.

Ну, теперь я утверждаю, что у них одинаковый исходный уровень? RIGHT?

5 -. Тогда почему бы не пересечь их и посмотреть, подходят ли они друг другу друг к другу? Итак, я привожу третий div-left: 35px; чтобы проверить, есть ли у них та же базовая линия сейчас?

Теперь мы доказали свою первую точку.

  • Второй пункт подробно

Ну, после объяснения первой точки вторая точка легко усваивается, и вы видите, что первый div, у которого есть свойство переполнения, отличное от видимого (скрытого), имеет нижнее поле на базовой линии строки.

Теперь вы можете сделать несколько экспериментов, чтобы еще раз иллюстрировать это.

Теперь возвращай свой беспорядок и посмотри, все ли в нем хорошо.

И теперь мы вернемся к тому, с чего мы начали.

Надеюсь, я ответил на ваш вопрос.

Ответ 3

Просто используйте vertical-align:top;

Демо

Ответ 4

Посмотрите этот альтернативный пример. Причина такого поведения описана в модуле CSS3: строка: 3.2. Линейная упаковка в коробке [1]:

В общем, начальный край строки строки касается начального края его содержащего блока, а конечный край касается края конца его содержащего блока. Однако плавающие ящики могут находиться между краем содержащего блока и краем окна линии. Таким образом, хотя линейные ящики в одном и том же контексте форматирования в целом имеют одинаковое продвижение вперед (в том, что содержит блок), они могут изменяться, если доступное пространство встроенного прогрессирования уменьшается из-за поплавков [...]

Как вы можете видеть, третий элемент перемещается вниз, хотя он не имеет свойства overflow. Причина должна быть где-то еще, чтобы найти. Второе поведение, которое вы заметили, описано в Каскадные таблицы стилей Уровень 2 Редакция 1 (CSS 2.1) Спецификация: 9.5 Поплавки [2]:

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

Все ваши div display:inline-block; используют специальный тип baseline в этом случае 10.8 Расчет высоты линии: свойства line-height и vertical-align ( очень конец) [3]:

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

Поэтому, когда вы используете плавающие элементы и элементы inline-block, плавающий элемент будет сдвинут в сторону, а встроенное форматирование будет пересчитано в соответствии с 1, С другой стороны, следующие элементы сокращаются, если они не подходят. Поскольку вы уже работаете с минимальным пространством, нет другого способа изменить ваши элементы, а затем нажимать на них 2. В этом случае наивысший элемент будет определять размер вашего оберточного div, таким образом определяя baseline 3, а с другой стороны, изменение позиции и ширина, указанная в 2, не может применяться к таким минимальным разнесенным элементам максимальной высоты. В этом случае поведение, как в моей первой демонстрации, приведет к результату.

Наконец, причина, по которой ваш overflow:hidden предотвратит нажатие #firstDiv на нижний край вашего #container, хотя я не мог найти причину в разделе 11. Без overflow:hidden он работает как исключенный и определенный 2 и 3. Демо

TL; DR:. Очень внимательно посмотрите рекомендации W3 и реализации в браузере. По моему скромному мнению, плавающие элементы полны решимости показать неожиданное поведение, если вы не знаете все изменения, которые они делают с вашими окружающими элементами. Вот еще одна демонстрация, которая показывает общую проблему с поплавками.

Ответ 5

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

Во-первых, нам нужно понять, что такое inline-block.
В определении MDN говорится:

Элемент генерирует блок-блок, который будет протекать с окружающим контентом, как если бы он был одним встроенным ящиком (ведя себя подобно замененному элементу)

Чтобы понять, что происходит здесь, нам нужно посмотреть на vertical-align по vertical-align и baseline умолчанию.

vertical position visualizations
На этой иллюстрации у вас есть эта диаграмма цвета:
Синий: базовый
Красный: верх и низ линии высоты
Зеленый: верхняя и нижняя части встроенного окна содержимого.

В элементе #left у вас есть текстовое содержимое, которое контролирует базовую линию. Это означает, что текст внутри определяет базовую линию для #left.
В #right нет содержимого, поэтому браузер не имеет другого выбора, кроме как использовать нижний ящик в качестве базовой линии.

Возьмите эту визуализацию, где я нарисовал базовую линию на примере, где первый встроенный контейнер имеет некоторый текст, а следующий пуст:

Baseline drawn

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

Это может быть проще понять на примере.

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}
<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

Ответ 6

проблема заключается в том, что вы применили float: слева на втором div. который заставляет второй div прибывать с левой стороны, и ваш первый div падает и приходит после вашего второго div. Если вы примените float: оставленный на первом div, ваша проблема исчезнет.

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

Ответ 7

Попробуйте добавить padding:0; к телу и удалить поле ваших div.

Добавьте цвет background-color:*any в сторону от фона *, чтобы проверить разницу.

Ответ 8

Попробуйте сделать все свойства CSS всех элементов такими же.

У меня была аналогичная проблема, и, исправляя это, я обнаружил, что я удаляю элемент Element with Font в Div Element.

После сброса свойства Element with Font было нарушено выравнивание всех DIV. Чтобы исправить это, я устанавливаю свойство Font для всех элементов DIV так же, как и элемент, который в него попадает.

В следующем примере элемент Dropped класса ".dldCuboidButton" определяется размером шрифта: 30 px.

Поэтому я добавил такое же свойство в остальные классы, то есть.cuboidRecycle,.liCollect,.dldCollect, которые используются элементами DIV. Таким образом, весь элемент DIV выполняет те же измерения до и после удаления элемента в него.

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

Вот пример динамического создания HTML с использованием CSS.

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);