html - 溢出隐藏和清除 :both removes paper effect shadow

Question

我想使用以下 css 创建纸张效果阴影，但我在这个 div 中有 3 个 div，它们需要并排放置。我使用 float 使 div 并排放置，但这会使父级的 div 高度小于内部内容。我尝试了 clear: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

由于您提供的代码很少，我不能 100% 确定您对最终结果的确切想法，但希望这很接近!

查看我的笔以获取工作模型: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 个月前......您可能已经想通了，但希望这对其他人有帮助。