Question

我知道这个问题之前已经解决了，我已经阅读了很多解决方案，但由于某些原因我无法正常工作。我有一个容器div，我想分成两个部分，并排。我已经将代码精简到最低限度（实际结构比这更复杂）。如果我可以得到两个内部div，红色和蓝色背景，并排显示我可以采取其余的方式。从理论上讲，它们应该扩展到以大约30/70的比例填充包含div中的白色区域，但我只是被卡在并排浮动它们。如果对我的问题有一个确切的答案，我错过了某种方式，那么内部的SO链接就可以了。

<div style="margin-left:40px; width:955px; height:300px; background-color:#d6d6d8; border:1px solid #767575;">
    <div style="background-color:#ffffff; margin-top:10px; margin-left:10px; border:1px solid #767575; 

width:932px; height:260px;">
        <div style="float:left; background-color:red; width:100px; height:100px;">
            video holder
        <div>
        <div style="float:left; background-color:blue; width:100px; height:100px;">
            form holder
        </div>
    </div>
</div>

Answer 1

您没有关闭红色div标签。你实际上是在打开另一个div并将蓝色放在那里。那应该解决它。

<div style="margin-left:40px; width:955px; height:300px; background-color:#d6d6d8; border:1px solid #767575;">
    <div style="background-color:#ffffff; margin-top:10px; margin-left:10px; border:1px solid #767575; width:932px; height:260px;">
        <div style="float:left; background-color:red; width:100px; height:100px;">
            video holder
        </div>
        <div style="float:left; background-color:blue; width:100px; height:100px;">
            form holder
        </div>
    </div>
</div>

修复简单容器中div的重叠问题

1 个答案: