CSS Photo Gallery Grid - Gap Problems // 图像周围的边距

【问题标题】：CSS Photo Gallery wGrid - Gap Problem // Margin around imagesCSS Photo Gallery Grid - Gap Problems // 图像周围的边距
【发布时间】：2020-05-12 17:14:14
【问题描述】：

已编辑 - 3x3 网格解决了无间隙（如果图像全部相同大小）现在，对于存储在我的计算机中而不是在线的不同大小的图像，我将如何做到这一点？我应该在添加代码之前标准化图像的大小，还是最好在 HTML 中调整它们的大小……我认为是 CSS。当包含不同尺寸的图像时，我怎样才能最好地将它们全部设置为相同的尺寸/尺寸？对象拟合似乎没有做到这一点.. JS Fiddle 和代码已更新，以显示带有不同大小图像的网格导致问题....从我所看到的情况来看，像 DOES 这样的网格通常不希望在 HTML 中指定宽度/高度，而是在 CSS 中指定？

我正在尝试将 3x3 照片网格放在网格项目 (onearticles) 中，这是我网站的主要内容部分。 对于画廊来说，网格间隙或只是间隙是问题所在。我还不太了解网页设计的图像格式，但即使有这张库存照片，图像之间也有巨大的差距。请帮忙！

我的图像采用简单的 3x3 布局 网格模板列：1fr 1fr 1fr； 和 grid-template-rows: minmax(100px, auto);

并尝试了许多其他“响应式”变体，但问题仍然存在。我不认为“onearticles”和照片库继承了父项的任何差距，我知道我必须想办法让所有 9 张图像在它们的“网格”中大小相同，尽管它们并非所有人都具有相同的尺寸/尺寸。到目前为止，它是重复的库存图片，因此尺寸相同，但 差距问题是主要问题

在这些不同的地方发布代码时，我发现第 1 行和第 2 行之间的差距可能比第 2 和第 3 行之间的差距更大，因为 grid-template-rows：minmax(100px，自动）；我可以将其切换为自动以使这些差距垂直差距相同，但我不知道如何利用它来解决整体差距问题....

我的目标是让 3x3 照片网格位于环绕文本的左侧，我认为这不会比制作没有间隙的网格更难。

我在下面附上了我的所有代码以及一个 JS Fiddle。感谢您的帮助，让每个人都变得很棒！

* {box-sizing: border-box;}

figure {
	margin: 0px;
}   

    .wrapper {
        background-color: red;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        max-width: 100%;
        margin: 0;
        font: 1.2em Helvetica, arial, sans-serif;
        height: 100%;}

    .wrapper > * {
        background-color: rgba(255, 255, 255, .7);
        border-radius: 5px;
        padding: 0px;}

      h2 {
        word-wrap: normal;
      }
    
    a:hover {
        font-weight: bold;
        background-color: rgb(28, 224, 238);
    }

.main-head {
  grid-area: header;
  display: grid;
  gap: 0px;
  text-align: center;
  padding: 0px;
  word-wrap: break-word;
  
}
.main-head h1 {
  margin-top: 3vh;
  margin-bottom: 3vh;
  font-size: 20px;
}

.content {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    gap: 10px;
    height: 100%;
    padding: 0px;
    grid-template-areas: 
        "one one"
        "three four";
    padding-bottom: 0px;
    background-color: rgba(255, 255, 255, .0);
  }




.wrapper article div{
    height: 100%;
  
    background-color: rgba(255, 255, 255, .7);
    border-radius: 12px;

}


.one {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.onelineup {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.onearticles {
  grid-area: one;
  word-wrap: break-word;
  padding: 10px;
  height: 100%;
  }

  
#morsecrazy {
    border-radius: 4px;
    float: right;
    clear: right;
    margin: 7px 15px 5px 10px;
  }


.onelineup img {
    border-radius: 0px;
    float: left;
    clear: left;
    margin: 7px 15px 5px 7px;
    max-width: 90%;
    height: auto;
    }

.ad img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}




    
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 100%;
  font-size: 2vh;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}





.three {
    grid-area: three;
    height: 100%;
  }
.three h4 {
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
.three ul {
   list-style-type: auto;
   padding-left: 20px;
   padding-right: 5px;
   flex-direction: row;
  }
.three ul li {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}


.four {
  grid-area: four;
  height: 100%;
  padding: 0px;
  }


  .fourIFR {
    overflow: hidden;
    padding-top: 61.67872568688917%‬;
    position: relative;
    overflow: auto;-webkit-overflow-scrolling:touch;
  }
   
  .fourIFR-iframe {
     border: 0;
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
  }
  




   

.gallery {
  display: grid;
  float: left;
  grid-area: one;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px;
  border: 1px solid black;
  margin: 0px;
  max-height: 100%;
  max-width: 50%;
  padding-top: 0px;

  
}
.gallery__img {
  display: block;
  object-fit: contain;
  padding: 0px;
  max-width: 100%;
  max-width: 100%;
}


.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.gallery__item--2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.gallery__item--3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.gallery__item--5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
.gallery__item--6 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.gallery__item--7 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.gallery__item--8 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}
.gallery__item--9 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}












.main-nav {
  grid-area: nav;}
.main-nav ul {
  font-size: 24px;
  list-style-type: none;
  margin: 0;
  padding: 0;}
.main-nav ul li {
  padding-bottom: 0vh;}
nav ul {
  margin: 0;
  padding: 0;}

.side {
  grid-area: sidebar;
  font-size: 2.5vh;}
.side p {
  margin-bottom: 0px;
  padding-left: 4px;}

.ad {
  grid-area: ad;
  padding: 0px
}
.main-footer {
  grid-area: footer;
  padding: 0px;
}








.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
  }

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      content"
      "footer  footer";
    }
  nav ul {
    display: flex;
    justify-content: space-between;
  }

  

  .onelineup img {
    border-radius: 0px;
    float: left;
    clear: left;
    margin: 7px 15px 5px 7px;
    max-width: 300px;
    height: auto;
   
    }


  .videoofweek {
    width: 100%;
    min-height: 500px;
    display: block;
    object-fit: contain;
    
  }

}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"}
   nav ul {
     flex-direction: column;
     }
   .main-nav ul li {
    padding-bottom: 5vh;
  }

  .onelineup img {
    border-radius: 0px;
    float: left;
    clear: left;
    margin: 7px 15px 5px 7px;
    max-width: 300px;
    height: auto;
   
    }

}
<div class="wrapper">
		<header class="main-head">
		  <h1>Baseball Website</h1>
	
		</header>
	
		<nav class="main-nav">
		  <ul>
			<li><a href="../index.html">Home</a></li>
			<li><a href="lineup.html">Lineup</a></li>
			<li><a href="articles.html">Articles</a></li>
			<li><a href="vidoweek.html">Vid</a></li>
		  </ul>
		</nav>
		<article class="content">
		
		  <div class="onearticles">
			<section class="gallery">
				<figure class=”gallery__item gallery__item--1">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 1">    
				  </figure>
				  <figure class="gallery__item gallery__item--2">
					<img src="https://images.pexels.com/photos/1787035/pexels-photo-1787035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="gallery__img" alt="Image 2">
				  </figure>
				  <figure class="gallery__item gallery__item--3">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 3">
				  </figure>
				  <figure class="gallery__item gallery__item--4">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 4">
				  </figure>
				  <figure class="gallery__item gallery__item--5">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 5">
				  </figure>
				  <figure class="gallery__item gallery__item--6">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 6">
				  </figure>
				  <figure class="gallery__item gallery__item--7">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 7">
				  </figure>
				  <figure class="gallery__item gallery__item--8">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 8">
				  </figure>
				  <figure class="gallery__item gallery__item--9">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 9">
				  </figure>
			</section>
      <h2>The Lineup</h2>
        <p>Thank you so much for the help.  Can get doing so much more now after what's easily been my biggest impasse thus far!</p>
		  </div>
		  
		  <div class="three">
			<h2>Articles</h2>
			<ul>
			  <li>Y</li>
			  <li>A</li>
			  <li>D</li>
			  <li>A</li>
			</ul>
		  </div>
	
		  <div class="four">
		   
		</div>
		</article>
		<aside class="side">
		  <h2>Lineup</h2>
		  <p>C - Dude</p>
		  <p>1B - Dude</p>
		  <p>2B - Dude</p>
		  <p>3B - Dude</p>
		  <p>SS - Dude</p>
		  <p>LF - Dude</p>
		  <p>CF - Dude</p>
		  <p>RF - Dude</p>
		  <p>DH - Dude</p>
		</aside>
		<div class="ad">
		  <p>ad</p>
	
		</div>
		<footer class="main-footer">The footer</footer>
	
	  </div>

https://jsfiddle.net/wikex004/e650oLak/29/

【问题讨论】：

    标签： html css image css-grid image-gallery


    【解决方案1】：

    你的问题有点令人困惑，但这是你要找的吗？

    我只是删除了 .gallery__img 的 width 和 height 并删除了图的 padding。

    * {box-sizing: border-box;}

figure {
	margin: 0px;
}   

    .wrapper {
        background-color: red;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        max-width: 100%;
        margin: 0;
        font: 1.2em Helvetica, arial, sans-serif;
        height: 100%;}

    .wrapper > * {
        background-color: rgba(255, 255, 255, .7);
        border-radius: 5px;
        padding: 0px;}

      h2 {
        word-wrap: normal;
      }
    
    a:hover {
        font-weight: bold;
        background-color: rgb(28, 224, 238);
    }

.main-head {
  grid-area: header;
  display: grid;
  gap: 0px;
  text-align: center;
  padding: 0px;
  word-wrap: break-word;
  
}
.main-head h1 {
  margin-top: 3vh;
  margin-bottom: 3vh;
  font-size: 20px;
}

.content {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    gap: 10px;
    height: 100%;
    padding: 0px;
    grid-template-areas: 
        "one one"
        "three four";
    padding-bottom: 0px;
    background-color: rgba(255, 255, 255, .0);
  }




.wrapper article div{
    height: 100%;
  
    background-color: rgba(255, 255, 255, .7);
    border-radius: 12px;

}


.one {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.onelineup {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.onearticles {
  grid-area: one;
  word-wrap: break-word;
  padding: 10px;
  height: 100%;
  }

  
#morsecrazy {
    border-radius: 4px;
    float: right;
    clear: right;
    margin: 7px 15px 5px 10px;
  }


.onelineup img {
    border-radius: 0px;
    float: left;
    clear: left;
    margin: 7px 15px 5px 7px;
    max-width: 90%;
    height: auto;
    }

.ad img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}




    
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 100%;
  font-size: 2vh;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}





.three {
    grid-area: three;
    height: 100%;
  }
.three h4 {
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
.three ul {
   list-style-type: auto;
   padding-left: 20px;
   padding-right: 5px;
   flex-direction: row;
  }
.three ul li {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}


.four {
  grid-area: four;
  height: 100%;
  padding: 0px;
  }


  .fourIFR {
    overflow: hidden;
    padding-top: 61.67872568688917%‬;
    position: relative;
    overflow: auto;-webkit-overflow-scrolling:touch;
  }
   
  .fourIFR-iframe {
     border: 0;
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
  }
  




   

.gallery {
  display: grid;
  grid-area: one;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(100px, auto);
  gap: 0px;
  border: 1px solid black;
  margin: 0px;
  max-height: 100%;
  max-width: 100%;
  padding-top: 0px;

  
}
.gallery__img {
  display: block;
  object-fit: contain;
  padding: 0px;
  max-width: 100%;
  max-width: 100%;
}


.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.gallery__item--2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.gallery__item--3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.gallery__item--5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
.gallery__item--6 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.gallery__item--7 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.gallery__item--8 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}
.gallery__item--9 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}












.main-nav {
  grid-area: nav;}
.main-nav ul {
  font-size: 24px;
  list-style-type: none;
  margin: 0;
  padding: 0;}
.main-nav ul li {
  padding-bottom: 0vh;}
nav ul {
  margin: 0;
  padding: 0;}

.side {
  grid-area: sidebar;
  font-size: 2.5vh;}
.side p {
  margin-bottom: 0px;
  padding-left: 4px;}

.ad {
  grid-area: ad;
  padding: 0px
}
.main-footer {
  grid-area: footer;
  padding: 0px;
}








.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
  }

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      content"
      "footer  footer";
    }
  nav ul {
    display: flex;
    justify-content: space-between;
  }

  

  .onelineup img {
    border-radius: 0px;
    float: left;
    clear: left;
    margin: 7px 15px 5px 7px;
    max-width: 300px;
    height: auto;
   
    }


  .videoofweek {
    width: 100%;
    min-height: 500px;
    display: block;
    object-fit: contain;
    
  }

}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"}
   nav ul {
     flex-direction: column;
     }
   .main-nav ul li {
    padding-bottom: 5vh;
  }

  .onelineup img {
    border-radius: 0px;
    float: left;
    clear: left;
    margin: 7px 15px 5px 7px;
    max-width: 300px;
    height: auto;
   
    }

}
    	<div class="wrapper">
		<header class="main-head">
		  <h1>Baseball Website</h1>
	
		</header>
	
		<nav class="main-nav">
		  <ul>
			<li><a href="../index.html">Home</a></li>
			<li><a href="lineup.html">Lineup</a></li>
			<li><a href="articles.html">Articles</a></li>
			<li><a href="vidoweek.html">Vid</a></li>
		  </ul>
		</nav>
		<article class="content">
		
		  <div class="onearticles">
			<section class="gallery">
				<figure class=”gallery__item gallery__item--1">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 1">    
				  </figure>
				  <figure class="gallery__item gallery__item--2">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 2">
				  </figure>
				  <figure class="gallery__item gallery__item--3">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 3">
				  </figure>
				  <figure class="gallery__item gallery__item--4">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 4">
				  </figure>
				  <figure class="gallery__item gallery__item--5">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 5">
				  </figure>
				  <figure class="gallery__item gallery__item--6">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 6">
				  </figure>
				  <figure class="gallery__item gallery__item--7">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 7">
				  </figure>
				  <figure class="gallery__item gallery__item--8">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 8">
				  </figure>
				  <figure class="gallery__item gallery__item--9">
					<img src="https://images.pexels.com/photos/2115874/pexels-photo-2115874.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="gallery__img" alt="Image 9">
				  </figure>
			</section>
		  </div>
		  
		  <div class="three">
			<h2>Articles</h2>
			<ul>
			  <li>Y</li>
			  <li>A</li>
			  <li>D</li>
			  <li>A</li>
			</ul>
		  </div>
	
		  <div class="four">
		   
		</div>
		</article>
		<aside class="side">
		  <h2>Lineup</h2>
		  <p>C - Dude</p>
		  <p>1B - Dude</p>
		  <p>2B - Dude</p>
		  <p>3B - Dude</p>
		  <p>SS - Dude</p>
		  <p>LF - Dude</p>
		  <p>CF - Dude</p>
		  <p>RF - Dude</p>
		  <p>DH - Dude</p>
		</aside>
		<div class="ad">
		  <p>ad</p>
	
		</div>
		<footer class="main-footer">The footer</footer>
	
	  </div>

    【讨论】：

    • 非常感谢！我已经坚持了一周，但没有像你一样为“数字”设置任何东西。做到了。我试图做的是将间隙或边距减小到 0。图像之间存在很大的间隙。现在的挑战和需要是当图像大小/尺寸不同并且从我的计算机而不是网站链接时，如何最好地创建这样的网格。对于像这样的响应式网格，如何最好地调整/重新缩放具有不同尺寸和大小的图像？并且不突破他们的边界或空间？
    • 不只是把这些问题留在这里，但我想填写并感谢解决方案！现在只是调整大小/适合所有图片。我提到的突破只是一个缩小的屏幕，我知道我应该知道它是否在其他部分实现，但在那个重要的事情上有点模糊。另外，我要睡觉了，想填写。迫不及待地想在明天下班后仔细研究这个，感谢帮助！网格的实现占据了“onearticle” div 和浮动文本的 50%。成功！只需要希望将图像拉伸到 3x3 的位置，但“对象匹配”并没有这样做。
    • 亲爱的@TomWike 很高兴我能帮助你。如果它回答了您的问题，请投票支持我的回答。对于任何其他问题，请打开一个新问题，因为这有助于保持清晰。
    猜你喜欢
    • 2013-06-10
    • 2011-08-27
    • 2011-04-14
    • 2011-09-19
    • 1970-01-01
    • 1970-01-01
    • 2011-06-08
    • 2017-09-25
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode