图像向右浮动，左侧没有文字或其他元素

【问题标题】：Image float to the right and not have text or other elements wrap on the left图像向右浮动，左侧没有文字或其他元素
【发布时间】：2015-09-30 21:30:03
【问题描述】：

我希望下面的徽标与页面右侧对齐。我尝试添加float:right，但这会导致水平线在左侧环绕。我不希望其他任何东西占据垂直空间。

这是我的 HTML

<header >
   <div>
      <img  style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50">
      <br>
      <hr>
   </div>
</header>

【问题讨论】：

这正是float 的设计目的。

标签： html css

【解决方案1】：

您可以尝试添加文本对齐到包含div: (Working jsFiddle)

<header>
   <div style="text-align:right;"> <!-- add this css, images are by default inline -->
      <img style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50">
      <br>
      <hr>
   </div>
</header>

【讨论】：