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

我强烈建议使用bootstrap，但问题的另一个解决方案是

＆＃13;

.left{
  margin-left: 10%;
}

＆＃13;

<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>

＆＃13;

如果您使用像.panel这样的引导类，则bootstrap会自动处理所有平台上的扩展

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 个答案:

试试这个