html - Firefox中的绝对div位置

Question

我在页面上有一个部分，左侧有一个图像，右侧的图像居中显示文本。

我想在文本容器的底部放置一个样式化的 div。它在 Firefox 中不起作用。

<style type="text/css">
    .thin-hr {
        border-bottom: thin solid rgb(228, 235, 218);
        position: absolute;
        bottom: -15px;
        left: 0px;
        width: 100%;
    }
</style>

<section class="twelve columns watermark">
    <article class="valign row">
        <div style="position: relative;left: -20px;width: 32.38095%;">
            <img src="img/step1.png" alt="Step 1" />
        </div>
        <div style="position:relative; height:100%;">
            <h4>Heading 4 text</h4>
            <p>Paragraph text</p>

            <div class="thin-hr"></div>
        </div>
    </article>
</section>

Answer 1

尝试将您的 .thin-hr 修改为：

.thin-hr {
    border-bottom: thin solid rgb(228, 235, 218);
    position: absolute;
    top:100%;
    left: 0px;
    /* change height as your need */
    height:50px;
    width: 100%;
    margin-top:-50px;
}
/* you need add to margin-top value width of your border too (50 + 2px of border) */

Answer 2

你不能只使用边框吗？像这样的东西：

HTML

<section class="twelve columns watermark">
    <article class="valign row">
        <div style="position: relative;left: -20px;width: 32.38095%;">
            <img src="img/step1.png" alt="Step 1" />
        </div>
        <div class="divWithBottomBorder" style="position:relative; height:100%;">
            <h4>Heading 4 text</h4>
            <p>Paragraph text</p>

            <!-- remove this <div class="thin-hr"></div> -->
        </div>
    </article>
</section>

CSS

.divWithBottomBorder { border-bottom: thin solid rgb(228, 235, 218); }