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

Question

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

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

我试过使用 width 而不是 max-width 但没有用。

#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的指示，允许父级在调整大小时占用空闲space。

#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>

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

How to change number of columns in ol list depending on parent div width?

html

css

responsive-design