如何将大屏幕图像下的图形说明的位置更改为移动图像的右侧？

Question

我想将标题从图片底部传递到右侧，就像我在下一张图片中显示的那样。当它在笔记本电脑或平板电脑上时，我需要图片下方的标题，但当网站更改为移动设备时，我需要在右侧 phone。我用媒体查询尝试了 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>

我不知道我能改变什么。

感谢您的帮助。

Answer 1

属性 float 应该完成这项工作。要使浮动正常工作，您需要具有定义宽度的 non-inline 个元素。

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

Answer 2

在figure元素中添加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>

如何将大屏幕图像下的图形说明的位置更改为移动图像的右侧？

How I can change the position of the figcaption under the image in large screens to the right side of an image in mobile?

html

css

image

responsive-design

responsive