使用 CSS 在移动设备上将两张图片放在一起

Question

我对HTML和CSS很陌生。

现在我有一个 4 列布局，其中 4 张图像在桌面视图上彼此相邻，在移动设备中，所有图标都堆叠在一起。这是一个要解释的图像。

桌面视图

我不允许发布多个链接，所以我将使用x来解释。

这是使用 x 的桌面视图：
X X X X

这是当前使用 x 的移动视图"
十
十
十
十
(所有图像/图标都堆叠在一起(

这就是我试图使用 CSS 实现的目标：
X X
X X
(图像在一行上分组在一起(

我看到一篇使用左浮动和右浮动属性的帖子，针对小屏幕尺寸。不确定这是否有效。我希望得到一些帮助。

/* 1 column: 320px */
.autowide {
  margin: 0 auto;
	width: 94%;
}
/* 2 columns: 330px */
@media only screen and (min-width: 330px) {
  .hot-icon-group {
		float: left;
		margin-right: 2.564102564102564%;
		width: 48.717948717948715%;
	}
	.hot-icon-group:nth-child(2n+0) {
		margin-right: 0;
	}
}
/* 3 columns: 768px */
@media only screen and (min-width: 768px) {
  .autowide .hot-icon-group {
		width: 31.623931623931625%;
	}
	.autowide .hot-icon-group:nth-child(2n+0) {
		margin-right: 2.564102564102564%;
	}
	.autowide .hot-icon-group:nth-child(3n+0) {
		margin-right: 0;
	}
}
/* 4 columns: 992px and up */
@media only screen and (min-width: 992px) {
  .autowide .hot-icon-group {
		width: 23.076923076923077%;
	}
	.autowide .hot-icon-group:nth-child(3n+0) {
		margin-right: 2.564102564102564%;
	}
	.autowide .hot-icon-group:nth-child(4n+0) {
		margin-right: 0;
	}
}

<div class="autowide">
    <img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
  <img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
  <img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
</div>

Answer 1

您可以使用媒体查询根据设备或浏览器尺寸应用特定的 CSS。

将 p 标记替换为您的div。

p {
    text-align: center;
}
.container {
    max-width: 65rem;
    margin: 2rem auto;
}
.grid-size {
    display: flex;
    flex-wrap: wrap;
}
.size1of4 {
    width: 25%;
}
.size1of4:nth-of-type(even) {
    background-color: green;
}
.size1of4:nth-of-type(odd) {
    background-color: yellow;
}
@media all and (max-width: 768px) {
  .size1of4{
      width: 50%;
  }
}
@media all and (max-width: 480px) {
  .size1of4{
      width: 100%;
  }
}    

<div class="container">
      <div class="grid-size">
    	<div class="size1of4"><p>Content</p></div>
    	<div class="size1of4"><p>Content</p></div>
    	<div class="size1of4"><p>Content</p></div>
    	<div class="size1of4"><p>Content</p></div>
      </div>
</div>