html - 我怎样才能超越这个 div？CSS

Question

我有这个 sample

link

代码 HTML:

<div class="banner">

</div>


<div class="inner">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

代码 CSS:

.left,.main,.right{
    float:left;
    width:200px;
    height:100px;
}

.left{
    background:red;
}
.main{
    background:blue;
}
.right{
    background:aqua;
}

.banner{width:300px;background:yellow;height:100px;}

我想在不更改 HTML 代码(仅 CSS)的情况下将右侧的 div(.right)移动到与 div 网站(横幅)一致。

我尝试添加 margin-top:-6em 在其他分辨率下看起来不同。

你能帮我解决这个问题吗？ 提前致谢!

Answer 1

如果只能更改 CSS，如果要对齐，则必须使用 margin-top:-100px 而不是 margin-top:-6em。 https://jsfiddle.net/ck3pux8x/1/

但最好的解决方案是更改 HTML，将 .right div 移到 .inner 之外，将其放在 .banner 旁边，并使 .banner 向右浮动。 https://jsfiddle.net/ck3pux8x/2/