Question

我想要这个标记

<p> Content 1 </p>
<p> Content 2 </p>
<div> Div 1 </div>

我希望它显示如下：

<p> Content 1 </p>
<div> Div 1 </div>
<p> Content 2 </p>

原因是我希望在一个富文本编辑器中编辑页面文本（<p>标记中的文本），然后在单独的部分中编辑<div>标记中的内容但<div>标记的内容仍将以页面内容为中心。

我目前正在考虑在PHP中执行此操作，我只需explode()，将其按句子拆分，然后在div之前显示前几个句子，在{{1}之后显示其余句子}}。但是我希望有一些“div” - 就像这个问题的css技巧一样。

有关我真正想做的事情的参考，请看一下这个网站：

http://katron.sourcefit.com/static/a&a/about-us.html

Answer 1

你可以使你的div内联而不是阻止：

<div style="display: inline;"></div>

这样它会像<span>一样，但仍然是一个div。

Answer 2

您可以使用某些absolute positioning执行此操作。

<p id="Content1"> Content 1 </p>
<p id="Content2"> Content 2 </p>
<div id="Div1"> Div 1 </div>

CSS

#Content1{
    position:absolute;
    top:0;
    width:200px;
    height:50px;
    background:pink;
}

#Content2{
    position:absolute;
    top:120px;
    width:200px;
    height:50px;
    background:red;
}

#Div1{
    position:absolute;
    top:60px;    
    width:200px;
    height:50px;
    background:green;
}

http://jsfiddle.net/jasongennaro/bQLuH/

使块元素在文本之间插入

2 个答案: