Как падает этот кирпич HTML5? ⇐ Html

[Anonymous]

Я подготовил образец jsfiddle, чтобы показать проблему, с которой я в настоящее время сталкиваюсь со своим макетом: когда я динамически вставляю контент в конкретный элемент (кирпич), элемент опускается вместе со своим родителем таким образом, который выходит за рамки моего понимания HTML/CSS. Когда я удаляю контент, исходный макет восстанавливается, если я не использую Chrome ... тогда он сохранит свою позицию и снова упадет, когда вставлен новый контент. Интересно, откуда вышеупомянутая поля (это?).



HTML5 Falling Brick - What is this?

#brick {
background-color: lightgray;
border: solid black medium;
border-radius: 1em;
color: red;
font-size: 2em;
height: 100%;
text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }




Click me twice















< /code>

Обновление < /h1>

После прочтения снова мой вопрос, я понимаю, что это может указывать на неверное впечатление, что то, что я на самом деле пытаюсь сделать, - это исправление некоторого HTML.
, чтобы явно подчеркнуть точку, я не должен ничего менять. Пример с кирпичом - это просто забавная демонстрация проблемы, которую я наблюдаю.>

Подробнее здесь: https://stackoverflow.com/questions/161 ... lling-down