5

我正在尝试将加载图像放置在页面的右下角，但除了边距底部之外一切正常。

<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>

谁能告诉我什么或如何使它工作？谢谢

4

6 回答 6

6

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

于 2013-08-20T18:52:43.337 回答
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>

于 2013-08-20T18:53:03.367 回答
2

如果你想要它在页面的右下角，只需使用这个 css：

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

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

于 2013-08-20T18:50:11.817 回答
2

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

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

这里 - http://jsfiddle.net/maximua/SKcvr/

于 2013-08-20T18:54:22.750 回答
1

我有一个案例需要添加display: inline-block.

我无法解释为什么这有效，但确实有效！:-) 希望它可以帮助某人。

于 2021-05-14T20:45:35.760 回答
0

即使设置display:block为父 div 和子 div，margin 底部也可能不起作用。在使用填充和大边距顶部值进行测试之后，解决此问题的最佳方法是position:relative;用于父容器和position:absolute;子 div。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 中，我只考虑最相关的属性。您可以添加颜色、背景、字体系列等，不会影响布局。我只是对关键属性进行了编码以创建“效果边距底部”。

例子更花哨。

于 2021-07-19T09:17:12.550 回答