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

Posted 2023-03-06

【中文标题】如何将大屏幕图像下的 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?

【发布时间】：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>

我不知道我能改变什么。

感谢您的帮助。

【参考方案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>