我的右側邊欄無法像左側邊欄一樣正常工作？

Question

我自己學習HTML/CSS，大多數時候我在寫每一行時都會遇到錯誤。 我不知道爲什麼我的右側欄沒有像左側那樣正確放置。請看this jsfiddle。

<div class="bo"> 
     <div class="left"> 
     <div class="lside"> 
      <div class="lhead"></div> 
      </div> 
     </div> 
     <div class="pbo"> 
     <div class="post"> 
      <div class="hpost"> 
       <img src="1016949_702659679791359_6170947506430480265_n.jpg" height=50 width=50 /> 
    <p>VigneshWarar </p> 

      </div> 


      </div> 
     </div> 
     <div class="right"> 
     <div class="rside"></div> 
     </div> 

    </div> 

CSS

.bo{ 
    top:0px; 
    width:1150px; 
    background: #FAFAFA; 


    } 
    .pbo{ 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 60px; 
    height:500px; 



} 
.post{ 
    height: 390px; 
    width: 450px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 80px; 
    background: #000; 
    border: 1px solid #e8e8e8; 
    top: 0px; 



} 
.hpost{ 
    width:100%; 
    height: 50px; 
    border: 1px solid #ddd; 
    border-top:none; 
    border-right: none; 
    border-bottom: 1px solid #e8e8e8; 

} 
.hpost p{ 
    margin-left: 56px; 
    margin-top: -49px; 
    font-family: 'Open Sans', sans-serif; 
} 
.lside{ 
    width: 300px; 
    height: 300px; 
    float: left; 
    background:#FF0000; 
    border: 1px solid #e1e8ed; 


} 
.lhead{ 
    height: 40px; 

} 
.rside{ 
    float: right; 
    width: 300px; 
    height: 300px; 
    background:#0000FF; 
    border: 1px solid #e1e8ed; 
    margin-top: inherit; 

} 

Answer 1

有點模糊，但這並在trick..more信息已經在路上......

編輯：所以說這樣的：如果你漂浮他會從他的相對位置漂浮的元素。例如：如果一個div在相對位置：500px（頂部），40px（左側），並且您將div浮動到右側：他將浮動到相對位置：500px（頂部）0px（右側）。要解決此問題，您需要將此div放在相對位置：0px（頂部）。您可以通過以下方式實現此目的：a）將元素定位到top: 0px或b）將div放在html的第一行或無論他到達相對位置： 0像素（頂部）。

我也定位你的名字的元素它，而不是：

margin-left: 56px; 
    margin-top: -49px; 

到：

.hpost { 
    ... 
    position: relative; 
} 
.hpost p { 
    ... 
    position: absolute; 
    top: 0; 
    left: 50px; 
    padding: 0px 6px; 
} 

如果你不明白這一點，請隨時與我聯繫。

我還可以編輯你的CSS代碼到一個更可讀的代碼（對我來說）

.bo { 
 
    width: 1150px; 
 
    background: rgb(250, 250, 250); 
 
} 
 

 
.pbo { 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: 60px auto 0; 
 
    background-color: rgb(255, 255, 0); 
 
    /*T0*/ 
 
} 
 

 
.post { 
 
    height: 390px; 
 
    width: 450px; 
 
    margin: 80px auto 0; 
 
    background: rgb(0, 0, 0); 
 
    border: 1px solid rgb(232, 232, 232); 
 
} 
 

 
.hpost { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 1px solid rgb(221, 221, 221); 
 
    border-top: none; 
 
    border-right: none; 
 
    border-bottom: 1px solid rgb(232, 232, 232); 
 
    position: relative; 
 
} 
 

 
.hpost p { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: rgb(255, 192, 203); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50px; 
 
    padding: 0px 6px; 
 
} 
 

 
.lside, 
 
.rside { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid rgb(225, 232, 237); 
 
} 
 

 
.lside { 
 
    float: left; 
 
    background: rgb(255, 0, 0); 
 
} 
 

 
.lhead, .rhead { 
 
    height: 40px; 
 
} 
 

 
.rside { 
 
    float: right; 
 
    background: rgb(0, 0, 255); 
 
}

<div class="bo"> 
 
    <div class="left"> 
 
    <div class="lside"> 
 
     <div class="lhead">Left to Left</div> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="rside"> 
 
     <div class="rhead">Right to Right</div> 
 
    </div> 
 
    </div> 
 
    <div class="pbo"> 
 
    <div class="post"> 
 
     <div class="hpost"> 
 
     <img src="1016949_702659679791359_6170947506430480265_n.jpg" height=50 width=50> 
 
     <!-- not /> this is HTML not XML markup --> 
 
     <p>VigneshWarar</p> 
 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 

 

 
</div>