如何使用媒体查询使多个列表折叠答案

【问题标题】：How to make multiple lists collapse using Media Query如何使用媒体查询使多个列表折叠
【发布时间】：2020-09-11 12:37:30
【问题描述】：

你好，这里是第一次海报！

我正在制作一个网站，并且需要有关如何在屏幕宽度缩小时使该部分可折叠的帮助。我想知道我可以在媒体查询中添加什么，以使这些框不是水平显示，而是垂直显示，因此一个位于另一张卡片下方。

Here is a picture of the section I am trying to make collapse

          <section id="prices" classes="bg-light">
        <div class="container">
          <h2 id="pricing-header">Our Rates<span class="text-primary"></span></h2>
          <div class="boxes">
            <div class="box">
                <h3 id="price-Heading">Basic</h3>
                <div class="icon-title">
                  <li> $50 </li>
                </div>
                <div class="icon-title">
                  <li> 1 page </li>
                </div>
                <div class="icon-title">
                  <li> 1 page </li>
                </div>
                <div class="icon-title">
                  <li> 1 page </li>
              </div>
              <div class="icon-title">
                <li> 1 page </li>
              </div>
              <div class="icon-title">
                <li> $50 </li>
              </div>
                <li class="icon-title"> $50 </li>
              </div>

          <div link class="box">
            <h3 id="price-Heading">Standard</h3>
            <div class="icon-title">
              <li> $100 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
            <div class="icon-title">
              <li> $50 </li>
            </div>
              <li class="icon-title"> $50 </li>
            </div>

            <div link class="box">
              <h3 id="price-Heading">Premuim</h3>
              <div class="icon-title">
                <li>$250</li>
              </div>
              <div class="icon-title">
                <li> $50 </li>
              </div>
              <div class="icon-title">
                <li> $50 </li>
              </div>
                <li class="icon-title"> $50 </li>
              </div>

        </div> <!-- boxes ending -->
      </section>

      <!-- Pricing section Ends Here -->

【问题讨论】：

请显示包含现有媒体查询的css。

标签： html css mobile-website visual-web-developer

【解决方案1】：

听起来您想在移动设备上堆叠您的部分。这可以通过浏览器广泛支持的 flex-box 轻松实现。只需更改您在移动查询中证明内容和弹性方向的方式即可。


<style>
  .flex {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
  }

  .section {
    border: 1px solid;
    height: 20rem;
    width: 20%;
    min-width: 10rem;
  }

  @media only screen and (max-width: 500px) {
    .flex {
      flex-direction: column;
      align-items: center;
    }
  }
</style>

<div class="flex">
  <div class="section">
    Section one.
  </div>
  <div class="section">
    Section two.
  </div>
  <div class="section">
    Section three.
  </div>
</div>

flex-direction 将选择它是显示在行上还是堆叠为列。 Justify-content 然后会选择里面的项目是如何定位的。当然，在理想情况下，这些样式将位于单独的文件中:-)

【讨论】：