扩展<p>元素</p>

Question

我不知道如何更准确地标题。

所以我有动态生成的内容...基本上<p>元素代表用户创建的书签标签....随着元素数量的增加，我希望它们下面的内容自然地向下移动。所以没有重叠。

我这样做是通过创建一个绝对定位的元素，其中包含两个相对定位的元素:( SO贡献 - 请注意下面）

<style> 
    #wrapper { position:absolute; } 
    #i_will_expand { position:relative; top:0px; left:0px; } 
    #i_will_move_down { position:relative; top:0px; left:0px; } 
</style> 

<div id="wrapper"> 
    <div id="i_will_expand"><p class="single_tag">content here</p></div> 
    <div id="i_will_move_down"></div> 
</div> 

我认为这样可行但是因为我的<p>元素浮动了它们不占用空间（当你认为应该存在时不存在的神奇的CSS类型）......就像这样：

p.single_tag
{
    padding:                    2px;
    margin:                     2px;    
    border:                     1px solid #dddddd;
    float:                      left;
    font-size:                  14px;
    color:                      #888888;
    cursor:                     pointer;
}

因此我拿着标签的div没有y维...因此它下面的div永远不会向下移动...并且我的标签会流入我的书签。

现在我想为什么不移除浮动......所以我得到“真正的空间”...这不起作用...现在... ... p元素向下流动而不是向左流动....所以我想...为什么我不把显示设置为inline所以元素从左到右流动......很酷，但现在他们忽略了宽度属性...我的意思是他们不断流向永恒的权利....所以......我在头脑中打了几次（不是真的）...并且想...我怎么能解决这个问题....

在发帖后有人提到了一个属性......关于'word break'的事情，我添加了这个属性，我有希望....我理解CSS ...它正在处理...我的连续

元素作为一个长字......这是正确的，它将多个段落视为一个长字......但如果我使单词可以破解......那么现在它将遵循宽度属性.......然而....

现在我的标签被打破了b.c.他们在换行时分成两部分......加上我的所有顶部和底部边缘都消失了......所以它们完全无法满足并且无法使用...... 3小时后回到绘图板。

如果有一个可行的CSS解决方案来扩展<p>元素，请提供帮助。 如果没有可行的CSS解决方案，我将在Javascript中执行此操作。

相关

https://stackoverflow.com/questions/8963183/width-property-is-seemingly-ingored-by-expanding-p-elements

positioning relative to an absolute positioned element - is it possible?

When do nested child elements expand their parent elment?

Answer 1

#i_will_move_down { clear: both; }

应该这样做。

Answer 2

除了Kolink的回答之外，您还可以将overflow:hidden;应用于#i_will_expand元素，这应该强制它包裹并包含其子元素。给：

#i_will_expand { position:relative; top:0px; left:0px; overflow: hidden; }