CSS / HTML-使文字围绕图像
[英]CSS/HTML - make text go around an image
问题描述
I have an image on a webpage and I would like the text to start right next to where the image does but go around the image, if the text length goes past the image, the text would go underneath the image... Like you would if in Microsoft Word you made an image "tight" and placed it in a paragraph. 
我在网页上有一张图片，我希望文字从图片的位置开始，但要绕过图片，如果文字长度超过图片，则文字会在图片下方...就像您将如果在Microsoft Word中将图像“变紧”并将其放在段落中。 I am new to HTML and CSS... I've tried the style = "display:inline" but that does not seem to work. 我是HTML和CSS的新手...我尝试过style = "display:inline"但这似乎不起作用。 Can someone please help me? 有人可以帮帮我吗？
My HTML (edited out the image URL): 我的HTML（删除了图片网址）：
<body>
<div class = "main">
<div class ="picture">
<img src = "..." alt = "picture" style="width:180px;height:240px">
<p style='display:inline;'>This is the <b>HOME</b> page</p>
</div>
</div>
</body>
My CSS: 我的CSS：
body {
}
.main {
}
.main .picture {
padding-top: 15px;
padding-left: 5px;
text-align: left;
}
.main .info{
}
3 个解决方案
解决方案1
3 2015-04-04 10:18:05
I think what your searching for is float: left; 我认为您要搜索的是float: left; . 。
This sets the any element to ither the right or the left side. 这将设置任何元素以迭代右侧或左侧。
Is this what your looking for? 这是您要找的东西吗？
.image { width: 150px; height: 100px; border: 5px solid black; float: left; }
<main> <div class="image"></div> <span>Lorem ipsum dollar si amet, lorem ipsum dollar si amet, lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,</span> </main>
解决方案2
3 已采纳 2015-04-04 10:21:28
You might want to add float: left to your image properties : 您可能想在图片属性中添加float：：
body {
}
.main {
}
.main .picture {
padding-top: 15px;
padding-left: 5px;
text-align: left;
}
.main .info{
}
.main img {
float: left;
}
http://jsfiddle.net/u29yk98r/1/ http://jsfiddle.net/u29yk98r/1/
解决方案3
1 2015-04-04 10:27:16
<html><head><style>
body {
}
.main {
}
.main .picture {
padding-top: 15px;
padding-left: 5px;
float:left;
text-align: left;
}
.main .info{
}
</style>
</head><body>
<div class="main">
<div class="picture">
<img src="..." alt="picture" style="width:180px;height:240px">
<p style="display:inline;float: right;width: 500px;">This is the <b>HOME</b> page</p>
</div>
</div>
</body></html>
Hope this resolves your problem 希望这能解决您的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.