如果达到其容器的高度，列表内容将更改为新行

Question

我尝试在div（容器）中创建列表，以便在列表达到div的高度时更改行。 但它总是与div的高度重叠。如何使列表更改行？ 我尝试在div上使用display table，在列表中使用table-column但列表已不复用

-----------------
1      7       13
2      8       14
3      9       15
4      10      16
5      11      17
6      12      18
-----------------

heres the link

Answer 1

您可以考虑使用flex来轻松实现此目的：

＆＃13;

＆＃13;

ul {
  background: red;
  margin: 0;
  list-style: none;
  padding: 0;
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

li {
  width: 50px;
}

＆＃13;

<ul>
  <li>
    <p>1</p>
  </li>
  <li>
    <p>2</p>
  </li>
  <li>
    <p>3</p>
  </li>
  <li>
    <p>4</p>
  </li>
  <li>
    <p>5</p>
  </li>
  <li>
    <p>6</p>
  </li>
  <li>
    <p>7</p>
  </li>
  <li>
    <p>8</p>
  </li>
  <li>
    <p>9</p>
  </li>
  <li>
    <p>10</p>
  </li>
  <li>
    <p>11</p>
  </li>
  <li>
    <p>12</p>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;