Question

请考虑在<body>标记之后和某些文字之前将其放入某个HTML文件中：

<div style="width:100%; height=320pix; background-color:black">
<img src="logo.jpg">
</div>

对我来说，这会在浏览器页面的顶部创建一个黑色的“横幅”，徽标图像（320pix高）与左侧对齐。如何将其向右移动并使文本保持原样？我想知道这个代码的最简单的补充来实现它。当我在style="float:right"标记行中指定<img ...>时，后面的文本将其包围，从而破坏横幅效果。

但是......如果我将相同的元素转移到HTML中的<style>...</style>块中，并且包含img{float:right;}一切正常。我只是不明白为什么浮动行为应该在两种方法之间有所不同。我的脑袋即将爆炸...

一个可能的导致 - This question表明它应该很简单，但是当我精确地尝试给出的代码时，它仍然不起作用。它可能是一个！DOCTYPE还是类似的问题？我使用Firefox 15.0.1作为我的浏览器。

Answer 1

给包含图像的DIV一个相对位置。这样您就可以将图像完全放在其中。

<div style="position:relative; width:100%; height:320px; background-color:black">

    <img src="logo.jpg" style="position:absolute; right:0px;">

</div>

调整“右侧”以根据自己的喜好定位图像。

将图像右对齐而不在HTML中以文本环绕它

1 个答案: