Question

看到我无法使用＆＃39; float＆＃39;和绝对的＆＃39;在我的标题中，

我的div中嵌入了几个div，其中一些是浮动的，还有一个绝对定位的图像占位符。浮动的div用于文本值

我怎样才能使这个div不重叠我当前的蓝色＆＃39;图像占位符？

目前使用布局：

+----------------------------+
|      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包裹在图像的占位符周围？

Answer 1

如果你想保持绝对定位，你需要重新构建一些HTML。我能想到的最简单的解决方案是将.card-image Div放在左栏中，如下所示：

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

唯一的缺点是，如果卡片小于200px，你的内容之间会有额外的空间，但这样你就可以保留漂浮的DIV。

Answer 2

将.card-image移动到.card-right

上方

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

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

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

在html中围绕div包装文本

2 个答案: