html - 无法将嵌套的 div 放在 html css 中的另一个 div 旁边

Question

我有 4 个 Div 是

1. 主要内容部分
2. 在 Main Content Div 中我有另一个用于阴影的 div
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;

    }

Demo

我的目标:

Answer 1

因为您希望两个元素覆盖另一个元素，所以您需要对它们进行绝对定位。您可以通过使它们成为较大元素的子元素来避免这种情况。

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

Demo