Question

我的网站上有4张图像，我希望在桌面上水平显示，在移动设备上垂直显示。（我刚开始学习HTML，所以我基本上对编码一无所知）

我唯一能想到的就是找到一种方法来设置一些图像只要有空间就可以彼此对齐。

所以我将每张图片的宽度设置为24％。它在桌面上运行得非常完美，但当然在移动设备上它们在桌面上也是水平的

    <div>

<img src="xxx.jpg" width="24%">

<img src="yyy.jpg" width="24%">

<img src="zzz.jpg" width="24%">

<img src="ccc.jpg" width="24%">

</div>

在寻找解决方案后，我了解了浮点标记，并尝试了以下

    <div>

<img src="xxx.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="yyy.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="zzz.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="ccc.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

</div>

但同样的事情又发生了。它在移动设备上水平显示图像。

任何人都知道解决方案吗？

如果有帮助，我正在使用shopify来托管我的网站。

Answer 1

这里你的工作已完成..在你的浏览器上运行此代码。这里媒体查询用于移动显示。你应该学习如何为你关心的问题制作回应你的网站。努力工作：）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.img {
display:inline;
}
@media screen and (max-width: 480px) and (min-width: 320px) {
    /* For mobile phones: */
* {
    box-sizing: border-box;
}
.img {
display:block;
} }
</style>
</head>
<body>
<div class="img">
<img src="xxx.jpg" width="200px" height="300px">
<img src="yyy.jpg" width="200px" height="300px">   
<img src="zzz.jpg" width="200px" height="300px">    
<img src="ccc.jpg" width="200px" height="300px">   
</div>
</body>
</html>

Answer 2

如果将图像包装成li或

会更好

@media only screen and (max-device-width: 768px) {
   img {display:block;width:100% !important}
}

在桌面上水平对齐图像，在移动设备上垂直对齐

2 个答案: