How can you move an image left to above the text that was on left side of image
Question
Here's the code I have.
<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 eghij </h1></li>
<li><h1>klmn opqr stuw</h1></li>
<li><h1>wxyza bcdef hij klmno </h1></li>
</ul><br><br><br><br>
</body>
</html>
Widen your browser as far as it will go and then begin to narrow your it and you'll see the text easily flows down the left side of the image. As you narrow your browser farther, eventually all of the text will jump down below the level of the image, leaving a fairly wide white space left of the image where the text was. Once all of the text has jumped down, I need the image to shift left to directly above the text. How do you make the image move left once all the text is below the image w/o media queries?
Don't know why I never saw this problem addressed before
Thanks so much,
Chris
3 answers
solution1
0 2016-07-22 03:30:10
您可以像这样将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;">
solution2
0
I highly suggest using bootstrap but another solution to the issue would be
.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 eghij </h1></li> <li><h1>klmn opqr stuw</h1></li> <li><h1>wxyza bcdef hij klmno </h1></li> </ul><br><br><br><br>
if you were using bootstrap classes like .panel bootstrap automatically handles scaling on all platforms
solution3
0 2016-07-22 04:29:54
Try This
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.