Question

我需要从上到下，然后从左到右订购商品，例如：

但是，框阴影已被切除。请参考代码段：在底部截去项目3的框阴影，在顶部截去项目4的阴影（铬）。

有与此类似的问题，但是答案在这种情况下不适用。我不能在带有flex-direction: column的容器上使用flex，因为这需要一个明确的高度，并且我的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，在具有透明边框的项目周围添加包装。感谢您的任何建议。

Answer 1

添加current-weather.component.ts import { Component, OnInit } from '@angular/core' import { ICurrentWeather } from '../interfaces' import { WeatherService } from '../weather/weather.service' @Component({ selector: 'app-current-weather', templateUrl: './current-weather.component.html', styleUrls: ['./current-weather.component.css'], }) export class CurrentWeatherComponent implements OnInit { current: ICurrentWeather constructor(private weatherService: WeatherService) {} ngOnInit() { this.weatherService .getCurrentWeather('Hilversum', 'NL') .subscribe(data => (this.current = data)) } }和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%;
}

Answer 2

一个想法是在应用盒子阴影的地方使用伪元素。确保伪元素没有覆盖所有空间，因此不会受到切割的影响（使用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>

使用列数时框阴影被切断

2 个答案: