在HTML中，围绕一个div元素的文本。
在HTML中，围绕一个div元素的文本。
由于我不能在我的标题中使用'float'和'absolute'，
我有几个嵌套在我的div中的div，其中一些是浮动的，并且有一个绝对定位的图像占位符。浮动的div用于文本值。
如何使这个div不重叠在我当前的'blue'图像占位符上？
它当前使用的布局是：
+----------------------------+
| 信用卡 |
+----------------------------+
|\/\/\/\/\/\/\/\/\/\/\/\/\/\/|
+----------------------------+
| Mr Joe Bloggs 地址 |
| +-----------+ 更多地址 |
| | |___| | <-- 文本出现在图像占位符后面
| | | |
| |_______________| |
| 页脚文本 |
+----------------------------+
我想要的是：
+----------------------------+
| 信用卡 |
+----------------------------+
|\/\/\/\/\/\/\/\/\/\/\/\/\/\/|
+----------------------------+
| Mr Joe Bloggs 地址 |
| +---------------+ 更多 |
| | | 地址 | <-- 希望文本围绕它换行
| | | |
| |_______________| |
| 页脚文本 |
+----------------------------+
如何使这个div围绕图像的占位符？
问题原因：
- 问题是在使用绝对定位时，文本不能环绕在div中，导致内容重叠。
解决方法：
- 重新组织HTML结构，将.card-image div放在左栏中。
- 调整浮动宽度，使内容不重叠。
- 缺点是如果卡片小于200px，会在内容之间留下额外的空间。
以下是解决方法的代码示例：
Mr Joe Bloggs
.card-left{
width:65%;
min-width: 200px;
float:left;
}
.card-right{
width:35%;
float:left;
}
作者表示问题的实质是，如果名称换行成两行，图像div会因为名称长度而上下跳动。
作者通过对此进行了一些调整和尝试，已经解决了90%的问题，这样可以暂时使用，直到找到一个确定的解决方案。
在这个问题中，原始的HTML代码中，.card-image的位置在.card-right之后，但是要求将.card-image的位置放在.card-right之前。为了解决这个问题，可以通过将.card-image的float属性设置为left，而不是使用position: absolute来保持其在布局中的流动性。
以下是解决这个问题的代码：
Mr Joe BloggsThis is a very long address, with lots and lots of information available to the user. We could go on talking for years about this user! :P
.card-left {
width:50%;
float:left;
}
.card-right {
}
.card-image{
/* position:absolute; */
float: left;
margin-right: 10px;
}
然而，由于将.card-image的float属性设置为left，如果名字过长，它可能会跳出卡片之外。为了解决这个问题，可以采取以下两种方法之一：
1.设置名字字段的特定高度，无论是占用一行还是两行。
2.将名字字段从布局中移除，使其不会影响后面的任何内容。
以上就是解决在HTML中将文本环绕在一个div中的问题的原因和解决方法。