Question

我尝试使用flex和grid，但不能满足所有要求。开始认为这是不可能的。我以为您不需要媒体查询，但也许您也需要媒体查询？

Answer 1

结果

HTML

<div class="container">
  <div class="squares">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
    <div class="square">8</div>
    <div class="square">9</div>
    <div class="square">10</div>    
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: lightblue;
}

.container {  
  width: 100%;
  height: 100vh;
  display: flex;

  justify-content: center;
  align-items: center;
}

.squares {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 330px;
}

.square {
  height: 100px;
  width: 100px;

  margin: 5px;
  background: cyan;
  box-shadow: 1px 2px 5px #536a72;
}

@media screen and (min-width: 600px) {
  .squares {
    width: 440px;
  }
}

@media screen and (min-width: 700px) {
  .squares {
    width: 550px;
  }
}

@media screen and (min-width: 1050px) {
  .squares {
    width: 1050px;
  }

  .square {
    height: 200px;
    width: 200px;
  }
}

Answer 2

调整屏幕大小

.container {
  padding: 30px;
  background: #d2d2d2;
}

.container h4 {
  margin-bottom: 40px;
}

.container .gallery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.container .gallery .item {
  width: 100vw;
  margin: 5px;
  height: 100vw;
  background: #fff;
  max-width: calc(100vw/5 - 30px);
  max-height: calc(100vw/5 - 30px);
  filter: drop-shadow(5px 7px 4px rgba(0, 0, 0, .3));
}

@media only screen and (max-width: 767px){
  .container .gallery .item {
    max-width: calc(100vw/3 - 41px);
    max-height: calc(100vw/3 - 41px);
  }
}

<div class="container">
  <h4>Div Container</h4>
  <div class="gallery">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 3

尝试此代码。希望对您有帮助。

 

        body{
    		background-color:rgba(191, 239, 255, 0.7);
    	}
    	.all-div{
    		display: flex;
    		-ms-flex-wrap: wrap;
    		flex-wrap: wrap;
    		margin-right: -15px;
    		margin-left: -15px;
    	}
    	.single-div{
    		width: calc(100% / 5 - 10px);
    		height: 150px;
    		background-color: #b4f0ff;
    		box-shadow: 1px 2px 5px #536a72;
    		margin: 5px;
    	}
    	@media (max-width: 575px){
    		.single-div{
    			width: calc(100% / 3 - 8px);
    			height: 90px;
    			margin: 4px;
    		}
    		.container {
    			padding-right: 30px;
    			padding-left: 30px;
    		}
    	}

<div class="container">
    <div class="all-div">
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
      <div class="single-div"></div>
       <div class="single-div"></div>
    </div>
  </div>

CSS画廊的布局可以完成吗？

3 个答案: