响应式 3 列

Question

我希望我的 3 列能够在移动设备上响应，但我无法做到。我要添加什么，或者如何使它工作？ :) 我知道这可能是一个愚蠢的问题，但我是晚餐初学者，正在努力学习。谢谢

这是我正在使用的代码：

<ul style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 310px;">
    <li>
       <p>aaa</p>
    </li>
    <li>
       <p>bbb</p>
    </li>
    <li>
       <p>ccc</p>
    </li>
    <li>
       <p>ddd</p>
    </li>
    <li>
       <p>eee</p>
    </li>
    <li>
       <p>fff</p>
    </li>
    <li>
       <p>ggg</p>
    </li>
    <li>
       <p>hhh</p>
    </li>
    <li>
       <p>iii</p>
    </li>
</ul> 

Answer 1

提示来自您的评论

@G-Cyrillus 我没有偏好，但如果我必须选择的话，可能会有一个:) 任何一种方式都可以

您可以使用 column-width 代替 column-count 并最终使用 clamp() 调整大小：

li {border:1px solid;margin-bottom:2px}

<ul style=" column-width: clamp(310px, 30vw, 800px); ">
  <li>
    <p>aaa</p>
  </li>
  <li>
    <p>bbb</p>
  </li>
  <li>
    <p>ccc</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>eee</p>
  </li>
  <li>
    <p>fff</p>
  </li>
  <li>
    <p>ggg</p>
  </li>
  <li>
    <p>hhh</p>
  </li>
  <li>
    <p>iii</p>
  </li>
</ul>

关于clamp()，见：https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

关于column-width 见：https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

Answer 2

你可以使用网格，这是更清晰的解决方案：

<div style="display: grid; grid-template-rows: 3; grid-template-columns: 3">

  <p>Skvělé produkty</p>
  <p>Rychlé doručení</p>
  <p>Ochotu</p>
  
  <p style="grid-row: 2">Přívětivé ceny</p>
  <p style="grid-row: 2">Výhodné dopravné</p>
  <p style="grid-row: 2">Spolehlivost</p>

  <p style="grid-row: 3">Bleskovou expedici</p>
  <p style="grid-row: 3">Férový obchod</p>
  <p style="grid-row: 3">Bezodkladnou reklamaci</p>

</div>

编辑：聊天示例：

<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">

  <li>Skvělé produkty</li>
  <li>Rychlé doručení</li>
  <li>Ochotu</li>
  
  <li style="grid-row: 2">Skvělé produkty 2</li>
  <li style="grid-row: 2">Rychlé doručení 2</li>
  <li style="grid-row: 2">Ochotu 2</li>

</div>

<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">

  <p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Skvělé produkty</p>
  <p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Rychlé doručení</p>
  <p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Ochotu</p>
  
  <p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Přívětivé ceny</p>
  <p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Výhodné dopravné</p>
  <p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Spolehlivost</p>

</div>