Html Firefox-宽度：100%未按预期工作

我正在创建一个在Chrome和Safari中都能正常工作的网站，但在Firefox中遇到了困难。本期中适用的HTML很简单，只是另一个

div

中的三个

div

。目标是将一个

div

放置在父

div

的顶部，一个位于底部，另一个延伸到剩余空间：

                <div class="outer">
                    <div class="top">                            
                        <p>some junk here</p>
                    </div>

                    <div class="middle">
                        <img src="<?php echo(htmlspecialchars($image_url)); ?>"/>
                    </div>

                    <div class="bottom">
                        <p>more junk</p>
                    </div>
                </div>

---

问题是顶部和底部的

div

s没有扩展到100%。这些应用程序正在占用尽可能少的空间以适合其内容。我尝试在

div

s上设置最大宽度，尝试更改显示类型，但没有任何效果。更重要的是，一旦我调整了窗口的大小，即使是最小的大小，顶部和底部的

div

s也会射出100%。奇怪。我对这一点感到茫然，因此非常感谢您的帮助。谢谢。

.outer

DIV在这种情况下不能

display:inline block

<代码>内联块表示适应子宽度。您需要指定精确的

宽度

标注，或使用

块

显示属性

.outer {
    position: relative;
    display: block; /* use BLOCK here instead of inline-block; */
    text-align: center;
}

---

.outer

DIV不能是此场景的

display:inline block

<代码>内联块表示适应子宽度。您需要指定精确的

宽度

标注，或使用

块

显示属性

.outer {
    position: relative;
    display: block; /* use BLOCK here instead of inline-block; */
    text-align: center;
}

---

顶部和底部

div

s的宽度不能正常工作的原因是它们被设置为表的显示类型。仅删除该行就解决了问题

.top, .bottom {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    /* REMOVE: display: table; */
    position: absolute;
}

---

顶部和底部

div

s的宽度不能正常工作的原因是它们被设置为表的显示类型。仅删除该行就解决了问题

.top, .bottom {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    /* REMOVE: display: table; */
    position: absolute;
}

---

抱歉，我在外部

div

上定义了明确的宽度和高度。它们在别处有定义。我将更新代码。同样为了澄清-我需要使用内联块作为显示。谢谢你的建议。抱歉，我在外层

div

上定义了明确的宽度和高度。它们在别处有定义。我将更新代码。同样为了澄清-我需要使用内联块作为显示。谢谢你的建议。