Установка блоков на display: none, а затем добавление display: inline-block - способ обойти проблему, но не решает саму проблему.
Основной проблемой является свойство vertical-align, установленное для класса block. По умолчанию установлено значение baseline. Перед нажатием на кнопку все ваши элементы делятся в ряд, невидимые, с базовой линией, установленной в нижней части элемента. Однако, когда кнопка нажата, ваши блоки не только становятся видимыми, но, что более важно, вы добавляете некоторый текст в div. Это изменяет базовую линию, делая вместо этого нижнюю часть текста внутри div. Однако из-за vertical-align: baseline базовые линии всех элементов в строке пытаются выровнять. Базовая линия видимых элементов div с текстом должна совпадать с базовой линией невидимых элементов div без текста. Но их базовые линии теперь другие, поэтому единственный способ, которым они все могут сидеть по прямой линии на своих базовых линиях, был бы, если бы элементы div с текстом были перемещены вниз.
Я упростил ваши фрагменты, чтобы показать вам, что я имею в виду. Я сделал div-элементы видимыми, удалил кнопку и вместо этого вручную добавил текст в ваши div-ы в html. Как вы можете видеть, для div с текстом нижняя часть текста совпадает с нижней частью div без текста.
body {
background: white;
}
.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
}
<html>
<body>
<div class="block">TEXT</div>
<div class="block">TEXT</div>
<div class="block"></div>
<div class="block">TEXT</div>
</body>
</html>
Причина, по которой сначала нужно изменить блоки на display: none, а затем отобразить их один за другим, заключается в том, что в этом случае никогда не бывает Точка, когда в DOM одновременно присутствуют безтекстовые div и div с текстом, поэтому никогда не происходит несоответствие базовых показателей. Дивы вводят DOM с текстом в них, поэтому их базовые показатели всегда совпадают. Однако это не совсем решает проблему. Например, если бы текст в элементах div был разной длины, нижняя часть многострочного текста совпала бы с нижней частью однострочного текста, что снова привело бы к смещению.
Пример:
body {
background: white;
}
.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
}
<html>
<body>
<div class="block">text</div>
<div class="block">text</div>
<div class="block">very long text which takes up more than one line</div>
<div class="block">text</div>
</body>
</html>
Таким образом, правильным решением для этого будет добавление vertical-align: top к классу block, чтобы убедиться, что наше выравнивание не перепрыгивает через все место в ответ на изменение базовой линии.