坚持div位置

Question

你好我的造型有问题有两个div女巫身高是两个都是自动的但事情是当第一个div（.filter）高度被改变时第二个div（.posts）下降的高度被改变了（.filter height +50，。postt down + 50px）：

我的css：

.fp {
position: relative;
    width: 1050px;
    height: auto;
    background-color: red;
    left: 170px;
}

.filter {
    background-color: white;
    position: relative;
    width: 250px;
    min-height: 300px;
    height: auto;
    top: 20px;
    border-radius: 4px;
    border: 1px solid #1a171a;

    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}

.posts {
    background-color: white;
    position: relative;
    width: 750px;
    height: auto;
    float: right;
    margin-top: -280px;
    border-radius: 4px;
    border: 1px solid #1a171a;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);

}

html：

 <div class="fp">
        <div class="filter">

        </div>
        <div class="posts">

        </div>
    </div>

Answer 1

始终更喜欢display: inline-block而不是float。浮动打破了元素的正常流动。此外，负利润率不是一个好习惯。声明position: relative或position: absolute应仅用于特定情况，而不是对齐所有块。

https://jsfiddle.net/alexndreazevedo/vg9bajrL/

Answer 2

将float: left添加到.filter，从margin-top删除否定.posts并将overflow: hidden添加到.fp，让容器真正覆盖元件。

完成所有评论后，我已在此为您设置了完整的解决方案：http://codepen.io/anon/pen/ZWNXEN

在必要或需要时添加margins，将两个元素定义为float（左/右），并让容器覆盖子元素（overflow: hidden）。除此之外我删除了position: relative，这在这种情况下没用。