gpt4 book ai didi

html - CSS/HTML - 使文本环绕图像

转载 作者:太空宇宙 更新时间:2023-11-03 19:57:53 25 4
gpt4 key购买 nike

我在网页上有一张图片,我希望文本紧挨着图片的位置开始,但围绕着图片,如果文本长度超过图片,文本将位于图片下方...就像在 Microsoft Word 中将图像“紧密”放置在段落中一样。我是 HTML 和 CSS 的新手...我试过 style = "display:inline" 但这似乎不起作用。有人可以帮帮我吗?

我的 HTML(编辑掉图片 URL):

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

我的 CSS:

    body {
}

.main {
}
.main .picture {
padding-top: 15px;
padding-left: 5px;

text-align: left;
}
.main .info{
}

最佳答案

您可能希望将 float: left 添加到图像属性中:

 body {
}

.main {
}
.main .picture {
padding-top: 15px;
padding-left: 5px;
text-align: left;
}
.main .info{
}

.main img {
float: left;
}

http://jsfiddle.net/u29yk98r/1/

关于html - CSS/HTML - 使文本环绕图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29445050/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com