如何使用Media Query折叠多个列表

问题描述

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

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

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

解决方法

听起来您想在移动设备上堆放各个部分。使用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将选择将其显示在一行上还是堆叠为一列。证明内容然后将选择内部项目的位置。当然，在理想情况下，这些样式应放在单独的文件中：-）