Question

问题是，当我使用 display inline-block 时，它不会在移动屏幕上一次移动所有框（它有 3 个框称为“单一设施”）。问题是他们一次移动一个。我在媒体屏幕上使用显示内联块。

HTML：

<div class="box-facilities">

            <div class="single-facilities">
                <div class="img-facilities"></div>
                <div class="text-facilities">
                    <h1>World Class Library</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
                    od tempor.</p>
                </div><!--facilities-text-->
            </div><!--single-facilities-->

            <div class="single-facilities">
                <div class="img-facilities"></div>
                <div class="text-facilities">
                    <h1>Largest Play Ground</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
                    od tempor.</p>
                </div><!--facilities-text-->
            </div><!--single-facilities-->

            <div class="single-facilities">
                <div class="img-facilities"></div>
                <div class="text-facilities">
                    <h1>Tasty and Healthy Food</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
                    od tempor.</p>
                </div><!--facilities-text-->
            </div><!--single-facilities-->

        </div><!--box-facilities-->

CSS：

        .box-facilities{
        display: flex;
        height: 800px;
        align-items: center;
        justify-content: space-evenly;
    }
    
    .single-facilities{
        display: inline-block;
    }
    
    .img-facilities{
        background-color: gray;
        width: 27rem;
        height: 27rem;
        border-radius: 1.5rem; 
    }
    
    .text-facilities{
        margin-top: 1rem;
        max-width: 28rem;
    }

    @media screen and (max-width: 1370px){
    .box-facilities{
        display: inline-block;
    }
}

Answer 1

您可以将方向更改为 column 为

flex-direction: column;

.box-facilities {
  display: flex;
  height: 800px;
  align-items: center;
  justify-content: space-evenly;
}

.single-facilities {
  display: inline-block;
}

.img-facilities {
  background-color: gray;
  width: 27rem;
  height: 27rem;
  border-radius: 1.5rem;
}

.text-facilities {
  margin-top: 1rem;
  max-width: 28rem;
}

@media screen and (max-width: 1370px) {
  .box-facilities {
    /* display: inline-block; */
    flex-direction: column;
  }
}

<div class="box-facilities">

  <div class="single-facilities">
    <div class="img-facilities"></div>
    <div class="text-facilities">
      <h1>World Class Library</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
    </div>
    <!--facilities-text-->
  </div>
  <!--single-facilities-->

  <div class="single-facilities">
    <div class="img-facilities"></div>
    <div class="text-facilities">
      <h1>Largest Play Ground</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
    </div>
    <!--facilities-text-->
  </div>
  <!--single-facilities-->

  <div class="single-facilities">
    <div class="img-facilities"></div>
    <div class="text-facilities">
      <h1>Tasty and Healthy Food</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
    </div>
    <!--facilities-text-->
  </div>
  <!--single-facilities-->

</div>
<!--box-facilities-->

显示：内联块无法正常工作

1 个答案: