1. 首页
  2. 问题列表
  3. 如何使用css在改变分辨率的同时以特定的顺序动态定位图像？
提问者：小点点

如何使用css在改变分辨率的同时以特定的顺序动态定位图像？


我在学CSS。

我写了这个非常简单的代码，它显示8张图片在2行，每行包含4张图片。我打算有一个senario宽分辨率。（下图）4pics X 2rows->；好的

对于较小的分辨率宽度，我只希望一行中有2张图片，因此我们有4行2张图片。（下图）4pics X 4rows->；好的

我的问题是，当我改变分辨率到某些像素时，1张图片移动到下一行，而另外3张图片仍然保留一行，我不希望这种情况发生。（下图）(3+1)张图片x2rows->；错误的塞纳里奥

我知道我可以通过使用额外的“div”和@media标记“display:block/inline”来处理它，但是我想知道我如何能够仅用css处理它而不向HTML添加任何其他元素呢？

null

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
}

.image-section img {
  width: 200px;
  height: 200px;
  margin: 3px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="container">
  <div class="header">header</div>
  <div class="body-content">
    <div class="image-section">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-section">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>







  </div>
</div>

null


共2个答案

匿名用户

一个媒体就足够了:

点子:

null

@media (max-width:868px) {
  .body-content .image-section {
    max-width: 600px;
    margin: auto;
  }
}

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
}

.image-section img {
  width: 200px;
  height: 200px;
  margin: 3px;
}
<div class="container">
  <div class="header">header</div>
  <div class="body-content">
    <div class="image-section">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-section">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
  </div>
</div>

匿名用户

您可以使用div包装每个img，如下所示

null

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}

.image-wrapper {
  flex: 0 0 25%;
}

.image-wrapper img {
  max-width: 200px;
  max-height: 200px;
}

@media(max-width:600px) {
  .image-wrapper {
    flex: 0 0 50%;
  }
}
<div class="container">
  <div class="header">header</div>
  <div class="body-content">
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
  </div>
</div>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS