Question

我想像这样浮动div image 1

但是我得到的只是 image 2

我尝试将其与 float：right 和 position：absolute 对齐，但到目前为止没有任何效果。如果我尝试对齐文本，它会像这样 image 3

我的代码是：

<div style="float: right; z-index: 10; position: absolute; right: 0; top: 0;">
  ...
</div>

我不知道该怎么办。如果您能帮助我，我将不胜感激！

Answer 1

这是您的意思吗？在这个位置上不需要绝对位置。

https://codepen.io/dev-james/pen/mzzJWg

.right {
  float: right;
  margin: 20px 30px;
}

.text p {
  text-align: justify;
}

Answer 2

您是否尝试过以下方法？

代码：

<img style="float: right; padding: 0px 0px 0px 12px;" src="picture.png" alt="Picture" width="80" height="80" />

这应该有效。如果您不想自定义图像的大小，则可以删除width和height属性。如果您这样做，则只需尝试各种尺寸，直到找到所需的尺寸即可。

如果那不起作用，那么给这个机会：

<img src="pic.gif" width="80" height="80" align="right" style="padding: 0px 0px 0px 12px;"/>

Answer 3

以下是float: right

的示例

（单击Run code snippet以查看其运行情况）

div {
  width:300px;
  text-align: justify;
}

img {
 float: right;
  width:100px;
  height:100px;
  margin-left:15px;
}

<div>
<p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
</div>

如何向右浮动div

3 个答案: