如何在使用媒体查询达到某些分辨率后对齐 div 并做出响应？

Question

.container {
  width: 600px;
  height: 190px;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.one {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

.two {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.three {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.four {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.five {
  float: right;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {}

<div class="container">
  <div class="one">i am one</div>
  <div class="two">i am two</div>
  <div class="three">i am three</div>
  <div class="four">i am four</div>
  <div class="five">i am five</div>
</div>

我是 CSS 的新手，而且我想提高 div 的响应能力。通过使用媒体查询。我想将三个分辨率设置为

最大宽度：600px 适用于手机等小型设备，
最小宽度：600px（纵向平板电脑和大手机，600px 及以上），
最小宽度：768px（横向平板电脑，768px 及以上），
最小宽度：992px（laptops/desktops，992px 及以上），
最小宽度：1200px（大型笔记本电脑和台式机，1200px 及以上），

Answer 1

工作演示

.container {
  width: 600px;
  height: auto;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.one {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

.two {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.three {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.four {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

.five {
  float: right;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}


@media (min-width: 600px) {
  .container  > div  {
      display: flex;
    justify-content: center;
    margin: 0 auto 10px;
    flex-wrap: wrap;
    position: relative;
   
  }
  
  .container  > div.four, 
  .container  > div.five {
    margin-left: calc(50% - 92px)
  }
}

@media (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .container  > div {
    margin: 0 auto 10px ;
  }
}

Answer 2

尝试学习 flexbox 和 CSS 网格。我在codepen中用flexbox做了一个简单的演示，没有给出确切的答案。

demoCodepen link

教程：

如何在使用媒体查询达到某些分辨率后对齐 div 并做出响应？

How to align div and make responsiveness after reaching certain resolutions using media queries?

html

css

media-queries

responsive-design