如何将图像左移到图像左侧的文本上方

Question

这是我的代码。

<html>
<head>
<style>.xy{float:right}</style>
</head>
<body>

<img class="xy" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="233">

<ul>
<li><h1>abcd&nbsp;eghij&nbsp;&nbsp;&nbsp;&nbsp;</h1></li>
<li><h1>klmn&nbsp;opqr stuw</h1></li>
<li><h1>wxyza bcdef hij&nbsp; klmno&nbsp;</h1></li>
</ul><br><br><br><br>
</body>
</html>

尽可能扩大浏览器的范围，然后开始缩小浏览器的范围，您会看到文本轻松向下流到图像的左侧。 当您进一步缩小浏览器的范围时，最终所有文本都将跳到图像的下方，从而在图像保留文本的位置留出相当宽的空白。 一旦所有文本都跳下来，我需要将图像左移到文本的正上方。 一旦所有文本都在图像下方且不带媒体查询，如何使图像向左移动？

不知道为什么我从未见过这个问题

非常感谢，

克里斯

Answer 1

您可以像这样将float放在图片上：

<img class="xy" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="233" style="float:left;">

Answer 2

我强烈建议您使用引导程序，但另一个解决方案是

 .left{ margin-left: 10%; }

 <img class="left" src="http://m3.i.pbase.com/g9/50/1212650/3/162837533.B2hScStl.jpg"> <ul class="left"> <li><h1>abcd&nbsp;eghij&nbsp;&nbsp;&nbsp;&nbsp;</h1></li> <li><h1>klmn&nbsp;opqr stuw</h1></li> <li><h1>wxyza bcdef hij&nbsp; klmno&nbsp;</h1></li> </ul><br><br><br><br>

如果您使用的是.panel bootstrap之类的引导程序类， .panel在所有平台上自动处理缩放

Answer 3

尝试这个

<html>
<head>
<style>
    .content .xy{
        float:left;
    }
    .content ul{
        float:left;
    }
</style>
</head>
<body>

<div class="content">
<img class="xy" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="233">

<ul>
    <li><h1>abcd eghij    </h1></li>
    <li><h1>klmn opqr stuw</h1></li>
    <li><h1>wxyza bcdef hij  klmno </h1></li>
</ul><br><br><br><br>
<div style="clear:both"></div>
</div>
</body>
</html>

如何将图像左移到图像左侧的文本上方

问题描述

3 个解决方案

解决方案1
0 2016-07-22 03:30:10

解决方案2
0

解决方案3
0 2016-07-22 04:29:54

尝试这个

如何将图像左移到图像左侧的文本上方

问题描述

3 个解决方案

解决方案1 0 2016-07-22 03:30:10

解决方案2 0

解决方案3 0 2016-07-22 04:29:54

尝试这个

解决方案1
0 2016-07-22 03:30:10

解决方案2
0

解决方案3
0 2016-07-22 04:29:54