0

我想使用以下 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>
4

2 回答 2

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 个月前的……您可能已经想通了，但希望这对其他人有所帮助。

于 2014-10-10T00:16:30.143 回答
0

尝试添加position:relative到.boxcontainer

你能提供 CSS.boxcontainer和它的内容吗？还有，哪个容器.drop-shadow被应用到了？

设置一个jsfiddle是个好主意

于 2013-03-11T17:52:04.340 回答