Question

我在这里看到过类似的问题，但没有一个解决方案对我有帮助我试图浮动＆lt; img＆gt;除了＆lt; p＆gt;，＆lt; ul＆gt;的分组旁边。和另一个＆lt; p＆gt; 这里的标签是什么样的

<p></p>
<ul>
    <li></li>
    <li></li>
</ul>
<p></p>
<img src="" alt="" />

所以我需要的是＆lt; img＆gt;与所有其他三个标签相邻。
我想这是一个非常明显的解决方案，我错过了。

Answer 1

无论您是尝试将图像浮动到右侧还是左侧，当前的2个答案都不会将图像放在文本旁边 - 它们只会将图像浮动到右侧的下面文本。

当仅浮动图片时的示例 - 它不起作用：）

img { 
    float:right;
    /* styling to show a "placeholder" for the image so you can see where it would appear */
    width:100px; height:100px; background:#ccc; 
}

<p>paragraph</p>
    <ul>
        <li>list item</li>
        <li>list item</li>
    </ul>
    <p>paragraph</p>
<img src="" alt="" class="" />

有两种方法可以执行此操作，具体取决于您是否可以控制HTML。

将图像移至文本之前，然后将其浮动

如果您可以更改html，则需要在文本之前移动图像，以便文本可以填充图像浮动后剩余的空间，例如，

img { 
    float:right;
    /* styling to show a "placeholder" for the image so you can see where it would appear */
    width:100px; height:100px; background:#ccc; 
}

<img src="" alt="" />
<p>paragraph</p>
    <ul>
        <li>list item</li>
        <li>list item</li>
    </ul>
    <p>paragraph</p>

将文字浮动到左侧，图像浮动到右侧

img { 
    float:right;
    /* styling to show a "placeholder" for the image so you can see where it would appear */
    width:100px; height:100px; background:#ccc; 
}

.text { float:left;}

<div class="text">
    <p>paragraph</p>
    <ul>
        <li>list item</li>
        <li>list item</li>
    </ul>
    <p>paragraph</p>
</div>
<img  style="float: right" alt="" />

但请注意，这会导致更多问题，因为当您浮动元素时，它会将它们从流中取出，并且从流中取出它们会变得更加复杂。

使用Clearfix

一个选项是使用clearfix来制作浮动“清除”它们之后的内容 - 请参阅此片段，了解有关和不使用clearfix的情况。

img { 
    float:right;
    /* styling to show a "placeholder" for the image so you can see where it would appear */
    width:100px; height:100px; background:#ccc; 
}

.text { float:left;}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

hr { clear:both;}

<h3>Without Clearfix</h3>
<div class="text">
    <p>paragraph</p>
    <ul>
        <li>list item</li>
        <li>list item</li>
    </ul>
    <p>paragraph</p>
</div>
<img style="float: right" alt="" />
<p><b>This is content after the floats</b></p>

<hr>

<h3>With Clearfix</h3>
<div class="clearfix">
<div class="text">
    <p>paragraph</p>
    <ul>
        <li>list item</li>
        <li>list item</li>
    </ul>
    <p>paragraph</p>
</div>
<img style="float: right" alt="" />
</div>
<p><b>This is content after the floats</b></p>

Answer 2

试试这个

 <img style="float: right" src="" alt"" />

Answer 3

为

添加样式

<style>
  img{
    float:right;
  }
</style>

HTML / CSS在段落和无序列表旁边浮动img

3 个答案: