Добавление изображений к элементам внутри многоколоночного макета CSS создает вертикальные промежутки - PullRequest
Новая
       1

Добавление изображений к элементам внутри многоколоночного макета CSS создает вертикальные промежутки

0 голосов
/ 06 мая 2020

Я сделал макет из нескольких столбцов в соответствии с этим блогом . Вертикальные зазоры между элементами равны. Но как только я добавляю изображения внутри элементов, эти пробелы исчезают, как вы можете видеть ниже (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>

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Проблема, вызванная использованием атрибута line-height, просто удалите его, это решит вашу проблему. Я не знаю, зачем он вам здесь нужен, он разделит ваши строки абзаца на 307px. просмотрите документацию , чтобы узнать об этом больше. 

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>
1 голос
/ 06 мая 2020

Вскоре после публикации я сам понял причину пробелов. Это высота строки, присвоенная элементам div. Я просто удалил line-height и фиксированную высоту, а затем поместил текст в элементы span.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...