向 CSS 多列布局中的元素添加图像会产生垂直间隙

Question

我按照这个做了多栏布局blogpost。元素之间的垂直间隙相等。但是一旦我在元素中添加图像，这些间隙就会变得混乱，如下所示 (DIV #1)。我很想知道为什么会发生这种情况以及如何解决这个问题。

注意：图像应保持响应，即如果调整视口大小并因此改变列号和列宽，图像应填充周围的宽度 DIV 并自动调整它们的高度。

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

img {
  display: inline;
  width: calc(100% - 1rem);
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-sizing: border-box;
}

.masonry-with-columns div:nth-child(1) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(2) {
  height: 432px;
  line-height: 432px;
}

.masonry-with-columns div:nth-child(3) {
  height: 132px;
  line-height: 132px;
}

.masonry-with-columns div:nth-child(4) {
  height: 428px;
  line-height: 428px;
}

.masonry-with-columns div:nth-child(5) {
  height: 332px;
  line-height: 332px;
}


.masonry-with-columns div:nth-child(6) {
  height: 373px;
  line-height: 373px;
}

.masonry-with-columns div:nth-child(7) {
  height: 207px;
  line-height: 207px;
}

.masonry-with-columns div:nth-child(8) {
  height: 315px;
  line-height: 315px;
}

.masonry-with-columns div:nth-child(9) {
  height: 462px;
  line-height: 462px;
}

.masonry-with-columns div:nth-child(10) {
  height: 440px;
  line-height: 440px;
}

.masonry-with-columns div:nth-child(11) {
  height: 177px;
  line-height: 177px;
}

.masonry-with-columns div:nth-child(12) {
  height: 220px;
  line-height: 220px;
}

.masonry-with-columns div:nth-child(13) {
  height: 162px;
  line-height: 162px;
}

.masonry-with-columns div:nth-child(14) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(15) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(16) {
  height: 425px;
  line-height: 425px;
}

.masonry-with-columns div:nth-child(17) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(18) {
  height: 210px;
  line-height: 210px;
}

.masonry-with-columns div:nth-child(19) {
  height: 438px;
  line-height: 438px;
}

.masonry-with-columns div:nth-child(20) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(21) {
  height: 415px;
  line-height: 415px;
}

.masonry-with-columns div:nth-child(22) {
  height: 246px;
  line-height: 246px;
}

.masonry-with-columns div:nth-child(23) {
  height: 498px;
  line-height: 498px;
}

.masonry-with-columns div:nth-child(24) {
  height: 313px;
  line-height: 313px;
}

.masonry-with-columns div:nth-child(25) {
  height: 407px;
  line-height: 407px;
}

.masonry-with-columns div:nth-child(26) {
  height: 148px;
  line-height: 148px;
}

.masonry-with-columns div:nth-child(27) {
  height: 291px;
  line-height: 291px;
}

.masonry-with-columns div:nth-child(28) {
  height: 494px;
  line-height: 494px;
}

.masonry-with-columns div:nth-child(29) {
  height: 287px;
  line-height: 287px;
}

.masonry-with-columns div:nth-child(30) {
  height: 347px;
  line-height: 347px;
}

.masonry-with-columns div:nth-child(31) {
  height: 444px;
  line-height: 444px;
}

.masonry-with-columns div:nth-child(32) {
  height: 174px;
  line-height: 174px;
}

.masonry-with-columns div:nth-child(33) {
  height: 157px;
  line-height: 157px;
}

.masonry-with-columns div:nth-child(34) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(35) {
  height: 254px;
  line-height: 254px;
}

.masonry-with-columns div:nth-child(36) {
  height: 376px;
  line-height: 376px;
}

<div class="masonry-with-columns">
  <div>
  <img src="https://picsum.photos/200/200" />
    1
  </div>
 <div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>

Answer 1

发布后不久，我自己就找到了差距的原因。它是分配给 div 元素的行高。我只是删除了行高和固定高度，然后将文本放入 span 元素中。

Answer 2

使用 line-height 属性引起的问题，只需将其删除即可解决您的问题。我不知道你为什么在这里需要它，它会使你的段落行 307px 分开。查看 documentation 以了解更多信息。

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

img {
  display: inline;
  width: calc(100% - 1rem);
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-sizing: border-box;
}

.masonry-with-columns div:nth-child(1) {
  height: 307px;
  /*line-height: 307px; REMOVE THIS LINE FORM ALL*/ 
}

.masonry-with-columns div:nth-child(2) {
  height: 432px;
  line-height: 432px;
}

.masonry-with-columns div:nth-child(3) {
  height: 132px;
  line-height: 132px;
}

.masonry-with-columns div:nth-child(4) {
  height: 428px;
  line-height: 428px;
}

.masonry-with-columns div:nth-child(5) {
  height: 332px;
  line-height: 332px;
}


.masonry-with-columns div:nth-child(6) {
  height: 373px;
  line-height: 373px;
}

.masonry-with-columns div:nth-child(7) {
  height: 207px;
  line-height: 207px;
}

.masonry-with-columns div:nth-child(8) {
  height: 315px;
  line-height: 315px;
}

.masonry-with-columns div:nth-child(9) {
  height: 462px;
  line-height: 462px;
}

.masonry-with-columns div:nth-child(10) {
  height: 440px;
  line-height: 440px;
}

.masonry-with-columns div:nth-child(11) {
  height: 177px;
  line-height: 177px;
}

.masonry-with-columns div:nth-child(12) {
  height: 220px;
  line-height: 220px;
}

.masonry-with-columns div:nth-child(13) {
  height: 162px;
  line-height: 162px;
}

.masonry-with-columns div:nth-child(14) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(15) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(16) {
  height: 425px;
  line-height: 425px;
}

.masonry-with-columns div:nth-child(17) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(18) {
  height: 210px;
  line-height: 210px;
}

.masonry-with-columns div:nth-child(19) {
  height: 438px;
  line-height: 438px;
}

.masonry-with-columns div:nth-child(20) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(21) {
  height: 415px;
  line-height: 415px;
}

.masonry-with-columns div:nth-child(22) {
  height: 246px;
  line-height: 246px;
}

.masonry-with-columns div:nth-child(23) {
  height: 498px;
  line-height: 498px;
}

.masonry-with-columns div:nth-child(24) {
  height: 313px;
  line-height: 313px;
}

.masonry-with-columns div:nth-child(25) {
  height: 407px;
  line-height: 407px;
}

.masonry-with-columns div:nth-child(26) {
  height: 148px;
  line-height: 148px;
}

.masonry-with-columns div:nth-child(27) {
  height: 291px;
  line-height: 291px;
}

.masonry-with-columns div:nth-child(28) {
  height: 494px;
  line-height: 494px;
}

.masonry-with-columns div:nth-child(29) {
  height: 287px;
  line-height: 287px;
}

.masonry-with-columns div:nth-child(30) {
  height: 347px;
  line-height: 347px;
}

.masonry-with-columns div:nth-child(31) {
  height: 444px;
  line-height: 444px;
}

.masonry-with-columns div:nth-child(32) {
  height: 174px;
  line-height: 174px;
}

.masonry-with-columns div:nth-child(33) {
  height: 157px;
  line-height: 157px;
}

.masonry-with-columns div:nth-child(34) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(35) {
  height: 254px;
  line-height: 254px;
}

.masonry-with-columns div:nth-child(36) {
  height: 376px;
  line-height: 376px;
}

<div class="masonry-with-columns">
  <div>
  <img src="https://picsum.photos/200/200" />
    1
  </div>
 <div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>

向 CSS 多列布局中的元素添加图像会产生垂直间隙

Adding images to elements inside a CSS multi-column layout produces vertical gaps

css

css-multicolumn-layout