Column-count> 1 увеличивает высоту родительского элемента inline-block - PullRequest
Новая
       26

Column-count> 1 увеличивает высоту родительского элемента inline-block

0 голосов
/ 02 июня 2018

При изменении числа столбцов элемента div, вложенного в тег inline-block (или тег block, для которого установлено отображение: inline-block), высота этого тега inline-block умножается на число count столбцавложенный div.

Когда вы запустите фрагмент, вы увидите рамку с синей рамкой, высота которой удвоена.С column-count: 3 высота будет утроена, с 4 она увеличится в четыре раза и т. Д.

Почему это так?

main {
  border: 1px solid blue;
}

article {
  display: inline-block;
}

#text {
  column-count: 2;
  border: 1px solid red;
}
<html>
  <body>
    <main>
      <article>
        <div id="text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed augue eu arcu eleifend iaculis. Vestibulum sem enim, pharetra vel orci a, tempor eleifend ligula. Fusce in congue nibh, ac dignissim velit. In in metus tempor, placerat est sed, luctus ipsum. Fusce tellus nulla, fringilla sed neque eget, imperdiet commodo ante. Quisque id arcu at purus suscipit vestibulum. Vestibulum cursus nunc mauris, quis vestibulum tellus finibus vitae. Morbi ut tincidunt felis, ut viverra sapien. Donec dictum, lacus sit amet laoreet consectetur, augue turpis posuere metus, eget consequat elit arcu non sem.
          </p>
        </div>
      </article>
    </main>
  </body>
</html>
...