gpt4 book ai didi

css - 带图像的文本的内联分词

转载 作者:行者123 更新时间:2023-11-28 04:05:19 25 4
gpt4 key购买 nike

我正在尝试将文本放在图像的右侧。我需要文本在不进入图像下方的情况下“中断”。

文本中的“中断”是故意限制宽度的结果。

我做了一个 JSFiddle of what I'm trying to do , 但它坏了。有些文字在图片右侧,这是正确的,其余文字在图片下方,这是错误的。

我该怎么做才能解决这个问题?我可以自由使用大多数标记或样式;在我的示例中,我并不局限于 div 元素。

最佳答案

我已经为您修改了代码。希望对您有所帮助。

<body style="width: 280px">

<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="word-wrap:break-word">Jonathan-Paul Montgomery-Benson</div>

</body>

更好的编码方式是避免内联样式。这是这个片段:

body {
width: 280px;
}
img {
float: left;
margin-right: 20px;
}
.break {
word-wrap: break-word;
}
<body>

<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="break">Jonathan-Paul Montgomery-Benson</div>

</body>

关于css - 带图像的文本的内联分词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42991603/

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