关于定位 HTML <picture> <source> 元素的答案

【问题标题】：On positioning HTML <picture> <source> element's关于定位 HTML <picture> <source> 元素的
【发布时间】：2019-03-12 12:16:05
【问题描述】：

我目前正在为大学设计一个网站。我正在为响应式网站使用 12 列布局，并且想知道如何将图像放置在所述列中的下方。

我正在使用一个元素并想移动该元素的 y 位置

source srcset = "res/african.jpg" media = "(min-width:600px)"> 元素向下。

在 div 标记中围绕它，定位各个列并尝试定位实际的图片元素不起作用，因为它要么向下移动每一列，要么完全删除图像。

               <div class = "col-2 col-s-4">
                    <picture >

                    <source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">
                    <source srcset = "res/african.jpg" media = "(min-width:600px)" // i would like to individually move down>
                    <source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">

                    <img src "">
                </picture>

【问题讨论】：

标签： html image css-position

【解决方案1】：

用新的div制作单独的图片元素>

                <div class = "africantabletimage">  
                    <picture>
                        <source srcset = "res/african.jpg" media = "(min-width:600px)" >
                        <img src "">
                    </picture>
                <picture >

                    <source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">

                    </div>
                    <source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">

                    <img src "">
                </picture>

            </div>

CSS

.africantablet image{
        padding-top:7%;
    }

【讨论】：