css - 扩展 元素

Question

我不知道如何更准确地命名它。

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

我通过创建一个绝对定位的元素来实现这一点，其中包含两个相对定位的元素，如下所示:(所以贡献 - 请注意下面)

<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>元素 float 它们不占用空间(神奇的 CSS 种类，当你认为它应该存在时不存在)......像这样:

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

因此我的包含标签的 div 没有 y 维度...因此它下面的 div 永远不会向下移动...并将我的标签捕捉到我的书签中。

现在我想为什么不删除 float ..这样我就得到了“真实空间”...这不起作用...b.c 现在...p 元素向下流动而不是向左流动....所以我想...为什么不将显示设置为 inline所以元素从左向右流动......很酷，但现在它们忽略了宽度属性......我的意思是它们永远向右流动......所以......我在脑袋上打了一拳几次(不是真的)...然后想...我该如何解决这个问题...

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

元素作为一个长词......没错，它将多个段落视为一个长词......但是如果我让单词变得易碎......那么它现在将遵循宽度属性......但是....

现在我的标签在公元前坏掉了。它们在换行符处一分为二……加上我所有的顶部和底部边距都消失了……所以它们完全被弄脏了，根本无法使用……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; }

应该这样做。