Question

我有2个div父母和孩子他们都有固定的宽度，孩子也有固定的高度，子div左边浮动，它有盒子阴影：0 1px 2px 0 rgba（0,0,0,0.4 ）问题是父div重叠了孩子的左阴影我不能向孩子添加margin-left因为它的左侧与parrent div上方菜单div的左侧对齐所以它必须正好在它的位置。我尝试了z-index，减去父母的余量以及许多其他我甚至无法计算的事情，但似乎没有解决问题。代码是：

<style>
#menu{
    width:100%;
    height:50px;
    background:#252525;
    margin:0 auto 20px auto;
}
#wrapper{
    background:#CCC;
    width:1195px;
    margin:0 auto;
    clear:both;
    overflow:auto;
    background:none;
    position:relative;
}
#wrapper{
    overflow:hidden;
}
#db_left, #db_right, #db_center{
    margin-right:30px;
    float:left;
}
#db_left{
    width:170px;
    position:relative;
}
#db_right{
    margin-right:0 !important;
    width:315px;
}
#db_center{
    width:650px;
    margin-top:20px !important;
}
#profpic_holder{
    width:150px;
    height:150px;
    padding:10px;
    position:relative;
    float:left;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
}
</style>
<body>
<div class="wrapper">
    <div class="header">
      Some Content...
    </div>
    <div id="db_left">
        <div id="profpic_holder">
            <img src="#" width="150" height="150" alt="" />
        </div>
        <div id="profname">
        </div>
    </div>
    <div id="db_center">
    </div>
    <div id="db_right">
    </div>
</body

对于一个优秀的UI设计师来说，这是一个巨大的问题，你知道的诅咒会更好;）

Answer 1

你拥有它的方式

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

不会有左影。如果你想在所有方面显示阴影，请使用此

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

我希望这会有所帮助。

Answer 2

修正了它。

#wrapper为overflow:hidden，因此可以看到其区域外的任何内容，包括孩子的影子。

我所要做的只是隐藏其顶部和底部的溢出，所以我这样做了：

#wrapper{
  overflow-y:hidden;
}

父母重叠孩子的盒子阴影

2 个答案: