html - 什么会影响容器的尺寸?

html - 什么会影响容器的尺寸?,第1张

所以我有以下结构:

<div id="bannerLogin" class="topBannerAnon">
    <a href="http://www.redacted.fr/" class="logo" target="_blank">
        <img src="redacted" style="border:none;">
    </a>
</div>

没有CSS,包含的div扩展到图像高度,位于div的左侧。

现在我想将该图像放在div的右边而不是自然左边。如果我在float: right;类上使用.logo,则<a>元素将从流中取出,因此我的包含div将不再延伸到图片高度(它将具有高度= 0)。 我试图将<a>元素包装到另一个div中并给它logo类(如果它需要是一个块元素),但行为相同。

所以我意识到我不知道如何在其容器的右侧附加元素,容器仍然考虑到所述元素的尺寸。有可能吗?

最佳答案:

3 个答案:

答案 0 :(得分:1)

你做得很好,你只需要一个清理元素,然后关闭你的容器,以使浮动的元素&#34;占用&#34;父母的空间。这样的事情应该有效:

<div id="bannerLogin" class="topBannerAnon">
    <a href="http://www.redacted.fr/" class="logo" target="_blank">
        <img src="redacted" style="border:none;">
    </a>
    <div class="clear"></div>
</div>

CSS

.clear {clear: both;}

答案 1 :(得分:0)

如果是图片,您可以使用传统的html align="right"标记将图片放在内容的右侧,并保持样式的其他方面相同。

align="right"标记位于IMG html元素中。

答案 2 :(得分:0)

鉴于此CSS:

.logo {
  float: right;
}

...您可以通过添加此CSS来增加div

#bannerLogin {
  overflow: hidden;
}

由于溢出的值与可见值不同,因此会产生新的block formatting context。

<强>段

&#13; &#13;
#bannerLogin {
  background: #fed;
  border: 1px solid black;
  overflow: hidden;
}

.logo {
  float: right;
}
&#13;
<div id="bannerLogin" class="topBannerAnon">
    <a href="http://www.redacted.fr/" class="logo" target="_blank">
        <img src="http://placehold.it/100x100" style="border:none;">
    </a>
</div>
&#13; &#13; &#13;

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复