如何将大屏幕图像下的 figcaption 位置更改为移动图像右侧？答案

【问题标题】：How I can change the position of the figcaption under the image in large screens to the right side of an image in mobile?如何将大屏幕图像下的 figcaption 位置更改为移动图像右侧？
【发布时间】：2020-12-25 16:17:27
【问题描述】：

我想将图片底部的标题传递到右侧，就像我在下一张图片中展示的那样。当它在笔记本电脑或平板电脑中时，我需要图像下方的标题，但当网站更改为手机时，我需要在右侧。我用媒体查询尝试了 flex，但没有任何改变。

我不知道是否可以这样做，因为我在搜索中找不到任何东西。

我怎样才能通过这个：

到这里：

我的代码是：

.content {
    display: inline-flex;
    width: 85vw;
    height: 100vh;
    align-content: center;
    background-color: green;
    margin-left:10%;
}

 figcaption {
        
        justify-content: center;
        text-align: center;
        align-content: center;
        align-items: center;
        font-family: 'Lato', sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
     width: 100%;
        
    }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 180px) 
and (max-device-width : 480px) {
    
    .content{
        height: 50vh;  
        
    margin-top:25vh;
    margin-bottom: 25vh;
    left: 0;
    right: 0;
    }
    
    .content img{
        
        width: 70%;
    }
    
    figcaption {
        
        width: 70%;
        color:aquamarine;
    }
    
    }

<div class="content">
   <div class="row align-items-center">
      <div class="col-lg-1 col-md-2">
         <figure>
            <img src='imgs/01.png' alt='missing' />
            <figcaption>300m<sup>2</sup></figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/02.png' alt='missing' />
            <figcaption>4</figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/03.png' alt='missing' />
            <figcaption>6</figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/04.png' alt='missing' />
            <figcaption>300m<sup>2</sup></figcaption>
         </figure>
      </div>
   </div>
</div>

我不知道我能改变什么。

感谢您的帮助。

【问题讨论】：

标签： html css image responsive-design responsive

【解决方案1】：

属性float 应该可以完成这项工作。要使浮动正常工作，您需要具有定义宽度的非内联元素。

figure > * {
    float : left;
    display: block;
    width: 150px;
}

【讨论】：

【解决方案2】：

在图形元素中添加display: flex，得到默认的flex-direction: row;。

.content {
    display: inline-flex;
    width: 85vw;
    height: 100vh;
    align-content: center;
    background-color: green;
    margin-left:10%;
}

figure {
  display: flex;
}

 figcaption {
   justify-content: center;
   text-align: center;
   align-content: center;
   align-items: center;
   font-family: 'Lato', sans-serif;
   font-weight: 900;
   color: white;
   text-align: center;
   width: 100%;    
 }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 180px) 
and (max-device-width : 480px) {
    
    .content{
        height: 50vh;  
        
    margin-top:25vh;
    margin-bottom: 25vh;
    left: 0;
    right: 0;
    }
    
    .content img{
        
        width: 70%;
    }
    
    figcaption {
        
        width: 70%;
        color:aquamarine;
    }
    
    }

<div class="content">
   <div class="row align-items-center">
      <div class="col-lg-1 col-md-2">
         <figure>
            <img src='imgs/01.png' alt='missing' />
            <figcaption>300m<sup>2</sup></figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/02.png' alt='missing' />
            <figcaption>4</figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/03.png' alt='missing' />
            <figcaption>6</figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/04.png' alt='missing' />
            <figcaption>300m<sup>2</sup></figcaption>
         </figure>
      </div>
   </div>
</div>

【讨论】：