Question

我正在尝试将加载图片放在页面的右下角，但除了margin-bottom之外，一切正常。

<div id="preload">
    <div align="right" style="margin-bottom:40px; margin-right:50px;">
        <img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
        <br>
        <a style="color:#00ff24;"><b>Please wait while the page is loading...
        <br>If the website doesn't load within one minute please refresh your page!</b>                                                                                                 
        </a>
    </div>
</div>

有谁可以告诉我什么或如何使它工作？感谢

Answer 1

这是边距与填充的本质。由于边距位于元素之外，因此除非后面有另一个元素，否则它们不会呈现。您可以在父级上使用1px的底部填充;应该触发渲染。

Answer 2

如果你想在页面的右下角使用这个css：

.yourClass {
    position: absolute;
    right: 0;
    bottom: 0;
}

如果您想更改像素数量，请将0改为您想要的

Answer 3

您应该指定绝对位置并使用底部和右侧的所有权。

http://jsfiddle.net/7yrUy/

<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
    <img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
    <br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>

Answer 4

尝试绝对位置并使用底部/右部而不是相应的边距：

<img src="http://thc-racing.ucoz.com/design/loading.gif" alt=""  style="position: absolute; bottom:40px; right:50px;"/>

此处 - http://jsfiddle.net/maximua/SKcvr/

Answer 5

我遇到了需要添加 display: inline-block 的情况。

我无法解释为什么这有效，但确实如此！ :-) 希望对某人有所帮助。

Answer 6

即使将 display:block 设置为父和子 div，边距底部也可能不起作用。在使用填充和大边距顶部值进行测试后，解决此问题的最佳方法是对父容器使用 position:relative;，对子 div 使用 position:absolute;。 div等元素已经有默认的display-block，不需要声明，如下：

.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}

.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}

在 HTML 中只考虑：

<header class="parent"> 
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>

在 CSS 中，我只考虑最相关的属性。您可以添加颜色、背景、字体系列等，不会影响布局。我只是编写了关键属性来创建“效果边距底部”。

Example more fancy.

margin-bottom不起作用

6 个答案: