Question

我目前正在设计一个大学网站。我正在为响应式网站使用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>

Answer 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%;
    }

关于放置HTML <picture> <source />元素的位置

1 个答案: