Question

所以我有以下结构：

<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类（如果它需要是一个块元素），但行为相同。

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

Answer 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;}

Answer 2

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

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

Answer 3

鉴于此CSS：

.logo {
  float: right;
}

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

#bannerLogin {
  overflow: hidden;
}

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

<强>段

＆＃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;

什么会影响容器的尺寸？

3 个答案: