0

我正在尝试浮动一些元素并应用 clearfix 以便父元素可以扩展到子元素的高度和宽度。

所以，我只是按照这个小提琴设置布局：http: //jsfiddle.net/fMjEx/

然后我想浮动里面的元素.bar。这通常很简单：

  1. 浮动元素。
  2. pie-clearfix使用或清除修复父级overflow: auto。

但是，我遇到了这些问题：

  • 如果我使用 pie-clearfix，.picture旁边的元素.bar也包含在清除中：http: //jsfiddle.net/6C7WD/

  • 如果我使用overflow: autoor overflow: hidden，则.bar不再跨越文档的宽度：http: //jsfiddle.net/fv2gA/

最初，我的一个解决方案是制作.picture position: absolute. 然而，这种方法的问题是元素被从流中取出。

在布局中，高度.bar是可变的，取决于里面的内容。我想给出一个.bar，以便它们之后的任何东西都被向下推那个量，这取决于是否或具有更大的高度。.picturemargin-bottom.bar.picture

这排除了使用position: absoluteon.picture作为解决方案。

是否有满足以下条件的解决方案？

  • Clear 仅在.bar.
  • 不从流中删除任何元素。
4

1 回答 1

0

这是我最终得到的解决方案：

为标记添加了一个包装器：

<div class="container">

<div class="group"> <-------------------------- This is the wrapper
    <div class="picture"></div>
    <div class="bar">
        <div class="info"> some text goes here</div>
        <div class="buttons">some other content goes here</div>
    </div>
</div>
</div>

和CSS：

.picture{
    width: 100px;
    height: 100px;
    float: left;
    background: green;
    margin-left: 100px;
    margin-top: 10px;
    z-index: 2;
    position: relative;
}

.bar{
    background: blue;
    margin-top: -80px;
    overflow: auto;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

.group{
    margin-bottom: 10px;
}

.group:after {
    clear: both;
    content: "";
    display: table;
}

.info, .button{
    float: left;
    margin-left: 200px;
}

.container{
    overflow: auto;
}

上面的小提琴：http: //jsfiddle.net/c6Lng/

于 2012-10-21T02:19:24.117 回答