html - 带有框阴影的 CSS 列问题

标签 html css gridview twitter-bootstrap-3

<分区>

我正在使用 CSS 列计数来创建网格。但是,我无法解决有关我正在使用的框阴影的小问题。

似乎每一列的最上面一行都被剪掉了。这不会影响边框,只会影响框阴影。

这是一个 fiddle :http://jsfiddle.net/DTcHh/3947/

如果你仔细观察,你会发现最上面的行元素没有阴影,看起来像是被剪到了列的底部?滚动到容器底部,您会在那里看到阴影的顶部。

有什么解决办法吗?

一些备份的CSS:

#builds {
  width: 96%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 2%;
}
.cols {
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count: 3;
}
.item {
  height: auto;
  width: 99%;
  margin-left: 1%;
  -webkit-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  border: 4px solid #000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
  margin-bottom: 20px;
}

<div id="builds" class="cols">
  <div class="item">
    <div class="thumbnail">
      <img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
    </div>
  </div>
</div>

填充到列容器的顶部不起作用。如果我给 items 类留出 10 个边距,它会作用于第一个元素而不是其他元素。

最佳答案

一开始我以为我戴眼镜看不太清楚,但我认为问题是你有两个 box-shadow 都带有 y-offsets 是积极的。如果你想在元素顶部有阴影,y-offset 应该是负数:

box-shadow: 0 -1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);

这是您所期望的吗:http://jsfiddle.net/pnrv7byy/2/

关于html - 带有框阴影的 CSS 列问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28344380/

相关文章:

javascript - 浏览器窗口关闭和选项卡关闭

java - Selenium Java findElement 查询对于唯一 ID 或 Xpath 无效

javascript - 如何使用 jquery-footable 创建过滤器下拉列表?

android - 清除 GridView 并在 android 中重新生成它

php - Yii2:对 GridView 中的关系计数列进行排序

android检查项目是否被点击

html - 删除 h1 和 h2 之间的空格

javascript - 使用nth-child制作国际象棋图案

css - 如何在 CSS 中设置最小高度属性时使 div 随内容扩展

jquery - 删除我的模板中的滚动条