如何将div从容器顶部固定在固定高度？

Question

我认为这需要javascript。我觉得要问它也不会有什么坏处。

我们都知道如何向右或向左浮动图像或div，并使文本在该图像的周围和下方流动。我试图从容器顶部以固定宽度浮动一个div，并在其上方和下方有文本流。

如果我可以将此div放在段落文本之上，那将是最简单的，但如果必须，我可以插入它。

我制作了这张粗略的图片，概述了我正在尝试做的事情。

谢谢！

Answer 1

有点作弊但可能使用虚拟间隔

<强> CSS：

#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}

.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}

.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}

.dummy {float: right; height: 300px; width: 1px; background: #f00;}

<强> HTML：

<div id="wrapper">

<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">   

<p>all your paragraphs follow</p>
</div>

工作示例：HERE

并且间隔物确实需要至少1px宽，但它可以是透明的

Answer 2

你尝试过这样的事吗？

http://jsfiddle.net/8DczT/1/

Answer 3

这正是float的作用;它会在您指定的任何位置放置一个框，并且内容会围绕它流动。请参阅this jsFiddle。

Answer 4

在浮动的div上放一个margin-top，从顶部向下推，这样的话：

<div>  <!-- parent containing div -->
    <div style="float: right; margin-top: 50px">floated div</div>
    <div>paragraph 1</div>
    <div>paragraph 2</div>
</div>

只要你获得了正确的边距，你就可以将它漂浮在两个段落div的中心之间。