тень от блока обрезается при использовании счетчика столбцов - PullRequest
Новая
       32

тень от блока обрезается при использовании счетчика столбцов

0 голосов
/ 19 декабря 2018

Мне нужно упорядочить свои предметы сверху вниз, затем слева направо, например: 

1 5
2 6
3 7
4 8

Однако тень от коробки обрезается.Ссылка на фрагмент: тень блока элемента 3 обрезается снизу, а элемент 4 обрезается сверху (хром).

Есть похожие вопросы, но ответы в этой ситуации не применимы,Я не могу использовать flex для контейнера с flex-direction: column, так как для этого требуется явная высота, а мой счет item является динамическим.Я также не могу установить элементы на display: inline-block, как предлагают другие ответы, так как мне нужно управлять этим контентом с помощью flex. 

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Две другие вещи, которые я пробовал из других подобных SO вопросов, которые не работали: установка overflow: visible, добавление оболочки вокруг элементов с прозрачной рамкой.Спасибо за любые предложения.

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Добавьте display: inline-flex и width: 100% свойства.break-inside: avoid-column свойство недействительно. 

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
  margin-top: -2px;
  margin-bottom: -14px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-top: 2px;
  margin-bottom: 14px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
0 голосов
/ 19 декабря 2018

Идея состоит в том, чтобы использовать псевдоэлемент, где вы применяете box-shadow.Убедитесь, что псевдоэлемент не занимает все пространство, чтобы на него не влияли обрезки (используйте top и bottom, отличные от 0) 

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
  position:relative;
  z-index:0;
}
.item:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:1px;
  bottom:3px;
  left:0;
  right:0;
    box-shadow: 
   0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
   0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
   0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
...