Question

我想使用下面的css创建一个纸效果阴影，但我在这个div中有3个div需要并排。我使用float来并排显示div，但这会使父级的div高度小于内部内容。我试过清楚：both和overflow：hidden来修复使高度相对于内容的问题，但这会消除阴影效果。

CSS

.boxcontainer {
   position:relative;
   width:90%;
}

.boxcontainer:before,
.boxcontainer:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.boxcontainer:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

HTML

<div id="paperbox" class="boxcontainer">
    <img class="mafacemobile" src="/images/maface.jpeg" alt="ma face" width="183px" height="183px">
    <div id="textwrapper">
    <h1>
    FILLING MORE TEX
        </h1>
<div id="icons"
<img...>
        </div>
</div>
</div>

Answer 1

由于您提供的代码最少，我并不完全确定您对最终结果的想法，但希望这很接近！

检查我的笔是否有工作模型：http://codepen.io/gnowland/pen/crGtE

...这是完成的代码：

<强> HTML

<div id="paperbox" class="boxcontainer">
  <div class="boxinner">
    <img style="-webkit-user-select: none" src="http://placehold.it/183x183" class="mafacemobile" alt="ma face" width="183px" height="183px">
    <div id="textwrapper">
      <h1>FILLING MORE TEXT</h1>
      <div id="icons"><img style="-webkit-user-select: none" src="http://placehold.it/50"></div>
    </div>
  </div>
</div>

<强> CSS

.boxcontainer {
  margin: 10px;
  display: inline-block;
  position: relative;
  background-color: #fff;
  z-index: -1;
}
.boxcontainer:before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #fff;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
}
.boxcontainer:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #fff;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -o-transform:rotate(3deg);
  transform:rotate(3deg);
}

.boxinner{
  position: relative;
  padding: 20px;
  z-index: 1;
 }

.boxinner > * {
  /* NOTE: This is just for demo, utilize the exact selectors in your code */
  display: inline-block;
  padding: 2px
 }

我使用你的.boxcontainer作为包装，并添加了一个内部div（.boxinner）来保存内容，以便你可以填充它等等。

主要的增加是使用display: inline-block。与该物业友好相处，真棒。

您可以在codepen上使用我的代码，如果您有任何后续问题，请告诉我。

希望这能为您解决！： - ）

编辑：我刚刚意识到你原来的问题是从7个月前开始的......你可能已经把它想出来了，但希望这可以帮助其他人。

Answer 2

尝试将position:relative添加到.boxcontainer

你能提供.boxcontainer的CSS及其内容吗？而且，哪个容器.drop-shadow被应用于？

设置jsfiddle

是个不错的主意

溢出隐藏和清除：两者都删除纸效果阴影

2 个答案: