无法让元素在移动设备上保持并排

Question

这可能是一个愚蠢的问题，有一个简单的解决方法，但我已经尝试了很多不同的 html 和 css 组合来让它工作，但我一生都无法让它真正工作。我正在开发一个项目，其中有彼此相邻的圆形元素。由于实施了 RSD，这些元素在移动视图中会自动堆叠。我的问题是我希望它们彼此并排，但只有其中一个圆圈在移动设备上隐藏。我明白了，其中一个圆圈隐藏了，但圆圈仍然不断堆叠。现在，圆圈下方的标题在移动设备上位于每个圆圈的一侧，因为这只是我在设计方面的第二个选择，如果我不能让圆圈保持在彼此旁边，我可以接受。因为理想情况下，当圆圈在移动设备上仍然彼此相邻时，标题将在移动设备上保留在圆圈下方，就像它们在桌面上的显示方式一样。您可能认为将所有元素放在一个单独的 div 中就是答案，但这不起作用。因此，除非我没有使用正确的 css 来让它工作，否则我会迷失方向。我已经很久没有使用 html 和 css 了，所以请多多包涵 😅

我尝试去掉彼此周围的各个 div 元素，并将它们全部包含在一个 div 中，根据需要调整 colsizing，并添加浮动 css，以便圆圈在移动设备中保持在彼此旁边。过去我使用浮动元素没有任何问题，但它对此不起作用。我还尝试了 display: block 以及 flex 和 inline ，但没有任何效果。我研究了很多解决方法，但没有任何效果，所以我真的对出了什么问题感到困惑。我尝试了各种不同的 html 和 css 方法，添加新的东西，删除东西，试图让它工作，但事实并非如此。

以下是文本形式的代码，供任何需要的人复制和粘贴：

<div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row sectionstyle">
      <div class="col-md-4">
        <h1 class="text-uppercase brand">Our Brand</h1>
      </div>


      <div class="col-md-2">
         <a href="services.html"><img src="images/plant-room-retro.jpg" alt="retro bedroom with plants" class="circleimg"></a>
        <h2 class="fw-normal">Home</h2>
        <p class="homepage">Plants are the livelihood of happy homes and create dimensionality.</p>
      </div><!-- /.col-lg-4 -->
      <div class="col-md-2 corporate">
        <a href="services.html"><img src="images/indoor-plant.jpg" alt="indoor plant" class="circleimg"></a>
        <h2 class="fw-normal">Corporate</h2>
        <p class="homepage">Bringing in greenery to work environments promotes productivity.</p>
      </div><!-- /.col-lg-4 -->
      <div class="col-md-2">
        <a href="services.html"><img src="images/coffee-shop-plants.jpg" alt="coffee shop with plants" class="circleimg"></a>
        <h2 class="fw-normal">Retail</h2>
        <p class="homepage">Shopping experiences are more personal with the addition of plants.</p>
      </div><!-- /.col-lg-4 -->
      <div class="col-md-2">
        <a href="services.html"><img src="images/home-plants-cat.jpg" alt="indoor plants with cat" class="circleimg"></a>
        <h2 class="fw-normal">& More</h2>
        <p class="homepage">We do what we do to help our clients by learning about you to cater to your needs.</p>
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row --> 
    </div>

Answer 1

不确定您正在使用的 CSS 是什么样子，但这是使用 Flexbox 的简单设置。

• flex-wrap: wrap

  会导致元素在需要时落入新行。没有它，东西将适合单行
• 在没有看到你的 CSS 的情况下，我猜你需要的是媒体断点来告诉 CSS 当它到达某个断点时要做什么。我猜你的断点是什么，但我添加了几个断点。

从你的解释来看，听起来你可以将其应用到你的项目中。

.row.sectionstyle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.col-md-4 {
  width: calc(100% / 3);
}
.col-md-2 {
  width: calc(66% / 4);
}

@media(max-width: 768px){
  .col-md-4 {
    width: 100%;
  }
  .col-md-2 {
    width: 25%;
  }
}

@media(max-width: 540px){
  .col-md-2 {
    width: 50%;
  }
}

@media(max-width: 400px){
  .col-md-2 {
    width: 100%;
  }
}

<div class="container marketing">
    <!-- Three columns of text below the carousel -->
    <div class="row sectionstyle">
      <div class="col-md-4">
        <h1 class="text-uppercase brand">Our Brand</h1>
      </div>

      <div class="col-md-2">
         <a href="services.html"><img src="images/plant-room-retro.jpg" alt="retro bedroom with plants" class="circleimg"></a>
        <h2 class="fw-normal">Home</h2>
        <p class="homepage">Plants are the livelihood of happy homes and create dimensionality.</p>
      </div><!-- /.col-lg-4 -->
      
      <div class="col-md-2 corporate">
        <a href="services.html"><img src="images/indoor-plant.jpg" alt="indoor plant" class="circleimg"></a>
        <h2 class="fw-normal">Corporate</h2>
        <p class="homepage">Bringing in greenery to work environments promotes productivity.</p>
      </div><!-- /.col-lg-4 -->
      
      <div class="col-md-2">
        <a href="services.html"><img src="images/coffee-shop-plants.jpg" alt="coffee shop with plants" class="circleimg"></a>
        <h2 class="fw-normal">Retail</h2>
        <p class="homepage">Shopping experiences are more personal with the addition of plants.</p>
      </div><!-- /.col-lg-4 -->
      
      <div class="col-md-2">
        <a href="services.html"><img src="images/home-plants-cat.jpg" alt="indoor plants with cat" class="circleimg"></a>
        <h2 class="fw-normal">& More</h2>
        <p class="homepage">We do what we do to help our clients by learning about you to cater to your needs.</p>
      </div><!-- /.col-lg-4 -->
      
    </div><!-- /.row --> 
</div>