Question

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

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

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我需要在中间删除该行，并且在底部你可以稍微留一点。

请帮忙！

Answer 1

正如评论中提到的那样，您应该在容器上应用box-shadow而不是内部元素。这将允许显示好像阴影效果应用于单个元素。我猜这就是你要找的东西。请参阅下面的代码段。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

同样，如果您希望div完全对齐，并且两者之间没有空格，则可以从内部和内部删除width属性。外部元素并添加display: inline-block;。这将确保外部和内部容器只需要在水平方向上占用尽可能多的空间。见下文：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

下面的代码片段只是外容器根据其包含的内容进行扩展的示例：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

希望有所帮助!!!

CSS Shadow为两个盒子合二为一

1 个答案: