如何根据父div宽度更改ol列表中的列数？

Question

我希望下面的列表根据父div的宽度减少列数。

我尝试使用具有最大宽度的@media规则，但它只考虑了浏览器的宽度，而不是父div的宽度。

我试过用宽度代替最大宽度，但没有用。

​

#opponentsOfCivList {
  columns: 4;
  -webkit-columns: 4;
  -moz-columns: 4;
  padding-left: 25px;
  list-style-type:disc;
}
@media screen and (max-width: 200px) {
  #opponentsOfCivList {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    padding-left: 5px;
    list-style-type:disc;
  }
}
li {
  padding-left: 2px;
}
#opponentsOfCivList {
  font-size: 12px;
}

<div style="background:grey; resize:horizontal; width:450px;overflow: auto;">
  <ol id="opponentsOfCivList"><li value="Phoenicia">Phoenicia</li><li value="Austria-Hungary">Austria-Hungary</li><li value="Persia">Persia</li><li value="Siam">Siam</li><li value="Maya">Maya</li><li value="Korea">Korea</li><li value="Babylonia">Babylonia</li><li value="Brazil">Brazil</li><li value="Ethiopia">Ethiopia</li><li value="America">America</li><li value="Spain">Spain</li><li value="Aztec">Aztec</li><li value="Vikingland">Vikingland</li><li value="Egypt">Egypt</li><li value="Greece">Greece</li><li value="China">China</li><li value="Arabia">Arabia</li><li value="Turkey">Turkey</li><li value="Mongol">Mongol</li><li value="Inca">Inca</li><li value="Portugal">Portugal</li><li value="Rome">Rome</li><li value="Netherlands">Netherlands</li><li value="Byzantium">Byzantium</li><li value="France">France</li><li value="Germany">Germany</li><li value="India">India</li><li value="Japan">Japan</li><li value="Huns">Huns</li><li value="Russia">Russia</li><li value="England">England</li><li value="Iroquois">Iroquois</li></ol>
  <p>resize this div at the bottom right!</p>
</div>

​

Answer 1

到目前为止，规则columns: number column不允许根据父级的宽度自动调整列。

若要调整列，请使用属性函数minmax() (网格)，指示最小值和最大值：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

带有参数auto-fit的指示，这将允许父进程在调整大小时占用空闲空间。

​

#opponentsOfCivList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    column-gap: 10px;
    font-size: 12px;
    list-style-type: disc;
}

li {
    padding-left: 2px;
}

<div style="background: grey; resize: horizontal; width: 450px; overflow: auto;">
    <ol id="opponentsOfCivList">
        <li value="Phoenicia">Phoenicia</li>
        <li value="Austria-Hungary">Austria-Hungary</li>
        <li value="Persia">Persia</li>
        <li value="Siam">Siam</li>
        <li value="Maya">Maya</li>
        <li value="Korea">Korea</li>
        <li value="Babylonia">Babylonia</li>
        <li value="Brazil">Brazil</li>
        <li value="Ethiopia">Ethiopia</li>
        <li value="America">America</li>
        <li value="Spain">Spain</li>
        <li value="Aztec">Aztec</li>
        <li value="Vikingland">Vikingland</li>
        <li value="Egypt">Egypt</li>
        <li value="Greece">Greece</li>
        <li value="China">China</li>
        <li value="Arabia">Arabia</li>
        <li value="Turkey">Turkey</li>
        <li value="Mongol">Mongol</li>
        <li value="Inca">Inca</li>
        <li value="Portugal">Portugal</li>
        <li value="Rome">Rome</li>
        <li value="Netherlands">Netherlands</li>
        <li value="Byzantium">Byzantium</li>
        <li value="France">France</li>
        <li value="Germany">Germany</li>
        <li value="India">India</li>
        <li value="Japan">Japan</li>
        <li value="Huns">Huns</li>
        <li value="Russia">Russia</li>
        <li value="England">England</li>
        <li value="Iroquois">Iroquois</li>
    </ol>
    <p>resize this div at the bottom right!</p>
</div>

​

使用columns: width value指定列宽度(以像素为单位)的解决方案：

columns: 100px;

​

#opponentsOfCivList {
    columns: 100px;
    column-gap: 20px;
    font-size: 12px;
    list-style-type: disc;
}

li {
    padding-left: 2px;
}

<div style="background: grey; resize: horizontal; width: 450px; overflow: auto;">
    <ol id="opponentsOfCivList">
        <li value="Phoenicia">Phoenicia</li>
        <li value="Austria-Hungary">Austria-Hungary</li>
        <li value="Persia">Persia</li>
        <li value="Siam">Siam</li>
        <li value="Maya">Maya</li>
        <li value="Korea">Korea</li>
        <li value="Babylonia">Babylonia</li>
        <li value="Brazil">Brazil</li>
        <li value="Ethiopia">Ethiopia</li>
        <li value="America">America</li>
        <li value="Spain">Spain</li>
        <li value="Aztec">Aztec</li>
        <li value="Vikingland">Vikingland</li>
        <li value="Egypt">Egypt</li>
        <li value="Greece">Greece</li>
        <li value="China">China</li>
        <li value="Arabia">Arabia</li>
        <li value="Turkey">Turkey</li>
        <li value="Mongol">Mongol</li>
        <li value="Inca">Inca</li>
        <li value="Portugal">Portugal</li>
        <li value="Rome">Rome</li>
        <li value="Netherlands">Netherlands</li>
        <li value="Byzantium">Byzantium</li>
        <li value="France">France</li>
        <li value="Germany">Germany</li>
        <li value="India">India</li>
        <li value="Japan">Japan</li>
        <li value="Huns">Huns</li>
        <li value="Russia">Russia</li>
        <li value="England">England</li>
        <li value="Iroquois">Iroquois</li>
    </ol>
    <p>resize this div at the bottom right!</p>
</div>

​