两个框合二为一的 CSS 阴影答案

【问题标题】：CSS Shadow for two boxes as one两个框合二为一的 CSS 阴影
【发布时间】：2015-10-14 21:09:28
【问题描述】：

由于我的网站设计，我需要加入两个div，它们需要看起来像一个。

所以没有边界，所有的东西都是白色的，它们看起来是一样的。

现在我需要添加一个阴影，事情变得复杂了！

到目前为止，我实现了这一点，但我无法弄清楚如何让它看起来不错！

#one {
  height: 300px !important;
  width: 300px !important;
  float:left;
  box-shadow:-1px 1px 1px 0px #888888 !important;
}
#two {
  float:right;
  height: 300px !important;
  width: 300px !important;
  
  box-shadow:1px 1px 1px 0px #888888 !important;
}
#wrapper{
width:600px;
}

<div id="wrapper">
    <div id="one">The two divs are</div>
    <div id="two">next to each other.</div>
</div>

我需要把中间那条线去掉，而且在底部你可以留出一点空隙。

请帮忙！

【问题讨论】：

我建议将阴影放在容器上而不是单个元素上。我看不出一个设计怎么会要求这样做。
我正在编辑woocomerce，并且没有容器：s
包装器是容器吗？或者你可以添加你自己的吗？没有办法（AFAIK）做你要求的造型。

标签： html css shadow

【解决方案1】：

正如 cmets 中提到的，您应该将box-shadow 应用于容器而不是内部元素。这将允许显示好像阴影效果应用于单个元素。我想这就是你要找的。请参阅下面的 sn-p。

#one {
    height: 300px;
    width: 40%;
    float:left;
}
#two {
    float:right;
    height: 300px;
    width: 40%;
}
#wrapper {
    width:100%;
    box-shadow: 2px 2px 5px 3px #888;
}
.clear {
    clear: both;
}

<div id="wrapper">
    <div id="one">Left-floated</div>
    <div id="two">right-floated.</div>
    <div class="clear"></div>
</div>

同样，如果您想让div 彼此完美对齐，中间没有任何空格，您可以从内部和外部元素中删除width 属性并添加display: inline-block; .这将确保外部和内部容器只占用水平所需的空间。见下文：

#one {
    height: 300px;
    display: inline-block;
    float:left;
}
#two {
    float:left;
    height: 300px;
    display: inline-block;
}
#wrapper {
    display: inline-block;
    box-shadow: 2px 2px 5px 3px #888;
}
.clear {
    clear: both;
}

<div id="wrapper">
    <div id="one">The two divs are &nbsp;</div>
    <div id="two">next to each other.</div>
    <div class="clear"></div>
</div>

下面的 sn-p 只是外部容器如何根据其包含的内容扩展的示例：

#one {
    height: 300px;
    display: inline-block;
    float:left;
}
#two {
    float:left;
    height: 300px;
    display: inline-block;
}
#wrapper {
    display: inline-block;
    box-shadow: 2px 2px 5px 3px #888;
}
.clear {
    clear: both;
}

<div id="wrapper">
    <div id="one">Just random text to increase width The two divs are &nbsp;</div>
    <div id="two">STILL next to each other.</div>
    <div class="clear"></div>
</div>

希望有帮助！！！

【讨论】：