水平分发数字

发布于 2025-01-23 13:14:20 字数 1102 浏览 0 评论 0原文

figure {
   display: grid;
   padding: 5px;
   float: left; 
   background-color: #fff;
   font-size: .875em;
   
}

figure img {
   display: block;
   max-width: 100%;
}

figcaption {
   display: table-caption;
   caption-side: bottom;
   text-align: center;
   padding: 0 5px 5px;
}

<figure>

    <a href="https://www.youtube.com/watch?v=-8JQB_wXjmk><img src=http://wordpress.local/wp-content/uploads/Thumbnail_1.png"></a>
    <figcaption>Video</figcaption>

    <a href="https://www.youtube.com/watch?v=jP8iCuXeM3g"><img src=http://wordpress.local/wp-content/uploads/Thumbnail_2.png"></a>
    <figcaption>PDF</figcaption>

</figure>

嗨，我在水平分发图像时遇到了一些问题。上面的代码会导致：

我想使其像img1 catchion1 |水平分发图像IMG2字幕2 | IMG3 CAPTION3 如果可能的话，我希望它是一个遍布3的网格，因为图像的数量可能会有所不同。我正在WordPress中的Beaver Builder HTML模块中编辑此内容。

感谢您的帮助:)

原文

figure {
   display: grid;
   padding: 5px;
   float: left; 
   background-color: #fff;
   font-size: .875em;
   
}

figure img {
   display: block;
   max-width: 100%;
}

figcaption {
   display: table-caption;
   caption-side: bottom;
   text-align: center;
   padding: 0 5px 5px;
}

<figure>

    <a href="https://www.youtube.com/watch?v=-8JQB_wXjmk><img src=http://wordpress.local/wp-content/uploads/Thumbnail_1.png"></a>
    <figcaption>Video</figcaption>

    <a href="https://www.youtube.com/watch?v=jP8iCuXeM3g"><img src=http://wordpress.local/wp-content/uploads/Thumbnail_2.png"></a>
    <figcaption>PDF</figcaption>

</figure>

Hi I'm having some issues with distributing images horizontally. The Code above results in this:

I Would like to make it distribute the images horizontally like img1 caption1 | img2 caption2 | img3 caption3
If possible I'd like it to be a grid thats 3 across and as deep as required, as the number of images could vary.
I am editing this in a beaver builder html module in wordpress.

Thanks for the help :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界和平 2025-01-30 13:14:20

我最终弄清楚了:)

<figure class="item">
    
        [acf_repeater field="linked_gallery" sub_fields="external_link,cover_image,file_type"]
         
            <div class="wrap">
                
                [generate_image picture_url="%cover_image%" external_url ="%external_link%" file_type = "%file_type%" ]
                <figcaption class="caption">%file_type%</figcaption>
                
            </div>
            
        [/acf_repeater]   
        
    </figure>
    
    
    
    .item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      float: left;
        
    }
    
    .caption {
      /*display: inline-block;*/
      caption-side: bottom;
    }
    
    .img {
       display: block;
       max-width: 100%;
    }
    
    .wrap{
        text-align: center;
    }

I ended up figuring it out :)

<figure class="item">
    
        [acf_repeater field="linked_gallery" sub_fields="external_link,cover_image,file_type"]
         
            <div class="wrap">
                
                [generate_image picture_url="%cover_image%" external_url ="%external_link%" file_type = "%file_type%" ]
                <figcaption class="caption">%file_type%</figcaption>
                
            </div>
            
        [/acf_repeater]   
        
    </figure>
    
    
    
    .item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      float: left;
        
    }
    
    .caption {
      /*display: inline-block;*/
      caption-side: bottom;
    }
    
    .img {
       display: block;
       max-width: 100%;
    }
    
    .wrap{
        text-align: center;
    }

回复收藏 0 原文

~没有更多了~