文字环绕一个div在HTML

看到，因为我不能用“浮动”，在我的标题“绝对”，文字环绕一个div在HTML

我有几个div的嵌套我DIV，其中有些是浮动的范围内，并绝对定位的图像占位符。浮动div用于文本值

我该如何使此div不重叠我目前的'蓝'图像占位符？

它目前使用的布局：

+----------------------------+ 
|  CREDIT CARD   | 
+----------------------------+ 
|\/\/\/\/\/\/\/\/\/\/\/\/\/\/| 
+----------------------------+ 
| Mr Joe Bloggs addressssssss| 
| +-----------+ more address | 
| |   |___|   | <-- text appears behind image placeholder 
| |    |   | 
| |_______________|   | 
| footer text    | 
+----------------------------+

什么，我想的是：

+----------------------------+ 
|  CREDIT CARD   | 
+----------------------------+ 
|\/\/\/\/\/\/\/\/\/\/\/\/\/\/| 
+----------------------------+ 
| Mr Joe Bloggs addressssssss| 
| +---------------+  more| 
| |    | address| <-- want text to wrap around it instead 
| |    |   | 
| |_______________|   | 
| footer text    | 
+----------------------------+

我怎样才能让周围的图像的占位符这个div包裹？

来源

2014-12-03 jbutler483

可能重复的[如何使用HTML/CSS在图像周围缠绕文本]（http://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html- css） – apaul 2014-12-03 17:24:05

@ apaul34208：我已经看到了，但因为我需要顶部两个div来浮动，所以我不能这样做。 – jbutler483 2014-12-03 17:26:27

如果你想保留绝对定位你需要重新构建你的一些HTML。我能想到的最简单的解决办法是把.card-imageDiv在你的左边一列是这样的：

<div class="card-left"> 
    Mr Joe Bloggs 
    <div class="card-image"></div> 
</div>

然后调整你的浮动宽度，所以内容不重叠。

.card-left{ 
    width:65%; 
    min-width: 200px; 
    float:left; 
} 
.card-right{ 
    width:35%; 
    float:left; 
}

唯一的缺点是，如果卡是小于200像素，你将有你的内容，但这样你能保持漂浮的div之间的额外空间。

来源

2014-12-03 20:28:59 crazymatt

我认为这个问题更像是如果名称沿着两行包装，图像div会在不同的名称长度上下跳动？ – jbutler483 2014-12-04 09:00:52

我设法工作/摆弄这个，并得到它的* 90％*的工作，所以它会做，直到我找到一个明确的解决方案。 :) – jbutler483 2014-12-08 14:44:52

移动.card像上述.card右

<div class="card-left"> 
    Mr Joe Bloggs 
</div> 

<div class="card-image"></div> 

<div class="card-right"> 
    This 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 
</div>

浮动而不是左侧位置保持.card图像的流程：绝对

.card-left { 
    width:50%; 
    float:left; 
} 
.card-right { 

} 
.card-image{ 
    /* position:absolute; */ 
    float: left; 
    margin-right: 10px; 
}

来源

2014-12-03 20:24:30 philipb3

如果名字变得太长（我真的不希望这个图像永远不会移动），这会让它“跳出”卡片 – jbutler483 2014-12-04 09:17:33

那么，如何处理一个长名字？如果图像被绝对定位，名称将与图像重叠？无论是需要一行还是两行，您都可以为名称字段设置特定的高度。或者，您可以将名称字段从流中取出，以便它不会影响后续的任何内容。 – philipb3 2014-12-04 22:39:41

文字环绕一个div在HTML

回答

相关问题