css - 在父 div 中浮动带有文本的 div

Question

我有一个<div>我想漂浮在一个 parent 里面<div>。父 div 包含一些 HTML 条目，例如texts, images, tables

如果我HTML这样做，那么它会给出我想要的结果

<div class="parent-div">
<div class="child-div">
Child div content
</div>

Parent div HTML content
</div>

结果

+---------- parent div --------------+
|Parent HTML content... +-----------+|
|...................... | child div || 
|...................... | child div ||
|...................... +-----------+|
|....................................|
|....................................|
+------------------------------------+

我的问题是我不想将第二个（子）div 内容放在父内容之前。

我想制作这样的HTML

<div class="parent-div">
Parent div HTML content

<div class="child-div">
Child div content
</div>
</div>

如果我像上面显示的那样制作 HTML，它会在完整的父 HTML 之后呈现子 div

以上结果

+---------- parent div --------------+
|Parent HTML content.................|
|....................................| 
|....................................|
|....................................|
|                       +-----------+|
|                       | child div ||
|                       | child div ||
|                       +-----------+|
+------------------------------------+

我正在为子 div 使用这些样式<div style="width:200px; float:right;">

child div如果我child div在父文本结束后发布，是否可以与父文本一起浮动

Answer 1

不float，只是margin-left:auto和margin-right:0：http: //jsfiddle.net/tovic/2QVX8/21/

编辑：如下评论：将原始框设置为绝对位置，然后创建一个浮动的假元素作为原始框的空间：http: //jsfiddle.net/tovic/2QVX8/22/