Question

我正在尝试构建一种tag-cloud。我有一个div（标记容器），其中我添加了span节点（标记）。

span个节点是默认的内联元素，因此如果我将display属性设置为display:block，则可以防止它们水平溢出div。

我还将float属性设置为float:left，因为我希望它们位于同一条线附近，如果线路已满，则会自动转到下一行。

现在的问题是，标签在底部垂直溢出。标记容器不会调整其高度以包含插入的所有标记。我怎么能解决这个问题？

修改这是小提琴。 http://jsfiddle.net/Vk92s/1/

如您所见，如果注释float: left，div会自动调整大小，但所有标记都会在新行上处理。相反，如果我添加float: left，标签会正确包装，但div不会调整大小。

Answer 1

这是fiddle。

您可以将overflow设置为hidden，如下所示：

<div id="test"> 
    <span>first</span> 
    <span>second </span> 
    <span>third </span> 
    <span>fourth </span> 
</div> 

#test
{
   border: 1px solid black;
   width: 100px; 
   overflow: hidden; 
}
span
{
  float: left;
}

Answer 2

尝试添加在所有元素下设置clear: both的div。

Working Demo

HTML

<div id="tag-cloud">
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <div class="clear-both"></div>
</div>

CSS

.tag{
    display: block;
    width: 98px;
    background-color: red;
    margin-right: 2px;
    float: left;
}
.clear-both{
    clear: both;
}
#tag-cloud{
    width: 300px;
    background-color: black;
}

Answer 3

在您的代码容器div中，添加此css规则：

overflow: auto;

这将使其扩展以包含其浮动内容。

修改

小提琴：http://jsfiddle.net/5AgxU/

Answer 4

我不想添加一个清除浮动元素的空元素，而是在父元素上使用以下内容，这样就不会污染你的标记。

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
   overflow: visible;
}

添加更多内容时，Div高度不会调整大小

4 个答案:

Working Demo

HTML

CSS