Question

因此，我对整个编码工作还是非常陌生的，为此，我正在为这个班级建立这个站点，我想对齐底部的这张照片，并将其移到页面的右侧。

<img src ="halogram%20VR.jpg" alt = "man in halogram type VR setting" width:"200" height= "200">

这是图片的代码，我尝试添加align=center之类的内容，但是没有结果。将我的图片移到页面右侧的正确代码是什么？

Answer 1

虽然可以使用float:right，但这意味着您需要为该元素之后的所有内容清除float。您可以在父元素上使用text-align作为更简单的选项：

div {
  text-align: right;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>

float弄乱了布局而没有clear的示例（请注意，在Stackoverflow的小宽度上看起来不错，单击full page将显示实际结果）。

img {
  float: right;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
  <h1>HELLO WORLD</h1>
</div>
<h1>HELLO WORLD</h1>

使用flexbox的示例

div {
  display: flex;
  justify-content: flex-end;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>

使用float和clear的示例：

.clear::after {
  display: block;
  content: "";
  clear: both;
} 

.float {
  float: right;
}

<div class="clear">
  <div class="float">
    <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
  </div>
</div>
<p>HELLO WORLD</p>

Answer 2

您可以使用<img src="image.jpg" alt="image" style="float: right">在HTML中执行此操作，也可以使用img {float: right;}在单独的.css文件中进行操作

将图像向右对齐

2 个答案: