包裹扩展容器

时间:2013-07-18 19:53:48

标签: css

我在CSS中有一个可扩展的容器。折叠时看起来像。(下图)

  • 第一
  • 第二
  • 第三

如果我展开第一项,则会发生这种情况(下方)

  • 第一个+第二个     +第三

浮动左边看起来像是导致问题,但没有它格式化是关闭。如何在展开后将其他所有东西包裹起来。

div.wrapper{
    float:left;
    position:relative;
    margin: 30px 30px 30px 30px;
}

3 个答案:

答案 0 :(得分:0)

div.wrapper{
    display:inline-block;
    position:relative;
    margin: 30px 30px 30px 30px;
}

答案 1 :(得分:0)

你必须'清除'你的流量。

.wrapper {
    float:left;
    clear:both;
    position:relative;
    margin: 30px 30px 30px 30px;
}

无需更改显示属性,也不需要使其表现得像“阻止”一样。

Fiddled here我在那里添加了一个仅用于视觉的边框。

答案 2 :(得分:0)

在.wrapper的结束div标签之后,放入一个明确的div:

// html code
// wrapper contents
</div>
<div style="clear: both"></div>