兩個盒子的CSS陰影爲一個

由於我的網站設計，我需要加入兩個divs，他們需要看起來像一個。兩個盒子的CSS陰影爲一個

所以沒有邊界，一切都是白色的，他們看起來是一樣的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>

我需要刪除中間這條線，並在底部你可以SE有點差距。

請幫忙！

來源

2015-10-14 fguespe

我建議把陰影的容器，而不是單個元素上。我看不出設計如何要求這樣做。 –

Im edditing woocomerce，並且沒有容器：s – fguespe

包裝是一個容器嗎？或者你可以添加你自己的？（AFAIK）無法做到您要求的造型。 –

正如在評論中提到的，你應該尋找到容器上，而不是在內部元素應用box-shadow。這將允許將陰影效果應用於單個元素上。我想這就是你要找的。請參閱下面的代碼片段。

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

以下代碼段僅僅是如何在外部容器將擴大基於它所包含的內容的一個例子：

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

希望幫助！

來源

2015-10-14 21:22:37

兩個盒子的CSS陰影爲一個

回答

相關問題