使用CSS将两个图像保存在移动设备上

Question

我是HTML和CSS的新手。

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

DESKTOP VIEW

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

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

这是使用x的当前移动视图“ X
X
X
X
（所有图像/图标彼此堆叠）

这就是我想用CSS实现的目标：
X X
X X
（图像在一行上组合在一起）

我看到一个帖子使用float left和float right属性，针对小屏幕尺寸。不确定这是否有效。我很乐意帮忙。

/* 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。

用你的div替换p标签。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;