Question

我在使用我的网站在Firefox中看起来很好。我有一个div然后在第一个内部有两个div，我希望两个内部的两个并排。这是HTML：

<div class="gluggi3">
    <h2 class="aust">Veðurspá</h2>
    <div class="vedurspa">Some content</div>
    <div id="map-canvas">More content</div>
</div>

然后是CSS：

.gluggi3{
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
    margin: 10px;
    border: solid;
    border-color: magenta;
    border-radius: 10px;
    width: 100%;
}

.vedurspa {
    display: block;
    width: 50%;
    float: left;
    padding-right: 50px;
}

#map-canvas {
    height: 300px;
    width: 300px;
    margin: 0px;
    padding: 0px;
    display: block;
}

此代码在Chrome中运行良好，但在Firefox中运行不正常，在Firefox中，“vedurspa”类的div消失了。我尝试使用内联，内联块和初始化左侧像其他问题建议，但仍然没有运气。谁能告诉我如何让他们在Firefox中并存？提前谢谢！

Answer 1

padding-right: 50px;上有.vedurspa，因此它们不是并排的，删除它可以解决您的问题

Answer 2

这不是FireFox问题。当视口要缩小时，＃map-canvas将开始包装。

考虑一下：

.gluggi3{
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
    margin: 10px;
    border-color: magenta;
    border-radius: 10px;
    width: 100%;
}

.vedurspa {   
    width: 50%;
    padding-right: 50px;
        float: left;
}

#map-canvas {
    height: 300px;
    width: 100px;
    margin: 0px;
    padding: 0px;
      float: left;
}

小提琴：http://jsfiddle.net/vUvhq/

另外，请删除第一个.gluggi3类

中的逗号

.gluggi3,{}

到

.gluggi3{}

Answer 3

我假设您将填充权限添加到.verdurspa，因此块之间会有空格。

尝试将float: right;添加到#map-canvas

Firefox不会把我的div放在一边

3 个答案: