無法將嵌套的div放置在html css中的另一個div旁邊

Question

我有4個Div

1. 主要內容科
2. 在主要內容分區中，我還有另一個用於陰影的分區
3. 內部main另一個div

我的問題：我想將兩個div彼此相鄰放置。 我真的不知道我怎么了

這是我的HTML

div id="Maincontent">
<div id="contentshadow" class="shadowCls"></div>
<div id="contentimg"> </div>
<div id="FindHotel"> </div>

這是我的Css

#contentshadow.shadowCls {
    border:2px solid;
    transform:rotate(-5deg);
    box-shadow:10px 10px 5px #888888;
    height: 475px;
    width: 100%;
    color: Yellow;
    float:right;
    }
#contentimg{
    border: 2px solid #F6C;
    transform: rotate(0deg);
    margin-top: 5px;
    width: 58%;
    height: 200px;
}
#FindHotel{
    border:2px #9FF solid;
    width:35%;
    height:200px;
    margin-left:60%;
    margin:right:0;
    margin-bottom:20%;
}
#Maincontent{
    border: 2px solid;
    margin-left:90px;
    width: 80%;
    height: 475px;
    color: Green;

    }

演示

我的目標：

Answer 1

因為您希望兩個元素覆蓋另一個元素，所以您需要對其進行絕對定位。 您可以通過使它們成為較大元素的子元素來避免這種情況。

#contentimg {
    ...
    width: 42%;
    position: absolute;
}
#FindHotel {
    ...
    margin-left: 43%;
    position: absolute;
    margin-top: 5px;
}

演示