stick div的位置，因爲它是

Question

你好，我有一個問題，我的造型有兩個div女巫高度是自動的，但事情是當第一個div（.filter）高度改變第二個div（.posts）下降不亞於高度改變（.filter高度+50，.POST下來+ 50像素）：

我的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

添加float: left至.filter，從.posts中刪除否定margin-top並添加overflow: hidden至.fp以使容器真正覆蓋這兩個元素。

之後所有的評論，我已經爲你設置在這裏的完整解決方案：http://codepen.io/anon/pen/ZWNXEN

它增加了margins在必要或desireable，兩個元素定義爲float（左/右），並在容器覆蓋子元素（overflow: hidden）。除此之外，我刪除了position: relative，在這方面沒有用。

Answer 2

總是更喜歡display: inline-block而不是float。浮動打破了元素的正常流動。此外，負利潤率不是一個好的做法。聲明position: relative或position: absolute應僅用於特定情況，而不是對齊所有塊。

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