Question

当更改嵌套在内联块标记中的div的列数（或设置为显示的块标记：inline-block）时，此内联块标记的高度乘以列的内存块数。嵌套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>

列数＆gt; 1增加了父内联块元素的高度

0 个答案: