兩個垂直div之間的空間

Question

我有3個div垂直堆疊，問題是頂部和中間div之間存在差距。此外，用作背景的圖像似乎在中心div的底部被截斷，因爲圖像的邊界底部已經消失（這是一個平坦的jpg，所以它不是圖形問題）。除此之外，這個div堆棧（右列，上面提到的那個）和左堆棧的div（左列）的高度並不是相同的高度，儘管div和圖形都是相同的高度：/你在主頁上可以看到我的意思http://sunnahspace.com：我在網絡上搜索了答案，它的真正壓倒性的我試圖設置行高爲0，例如，它沒有工作，也許我正在嘗試所有這些東西儘管錯了，所以不排除任何事情。下面有一些代碼：

<style type="text/css"> 
.body_titles { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 18px; 
    color: #FFF; 
    text-decoration: none; 
    width:600px; 
} 
.body_content { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 16px; 
    color: #333; 
    text-decoration: none; 
    overflow:hidden; 
    width:600px; 
} 
#column_left_container { 
    float:left; 
    width:640px; 
    height:946px; 
} 
#content_tab_top_left { 
    background-image:url(../img/container_top.jpg); 
    background-repeat:no-repeat; 
    height:335px; 
    width:640px; 
} 
#content_tab_center_left { 
    background-image:url(../img/container_center.jpg); 
    background-repeat:no-repeat; 
    height:311px; 
    width:640px; 
} 
#content_tab_bottom_left { 
    background-image:url(../img/container_btm.jpg); 
    background-repeat:no-repeat; 
    height:300px; 
    width:640px; 
} 
#column_right_container { 
    margin-left:20px; 
    float:right; 
    width:350px; 
    height:946px; 
} 
.body_titlesRIGHT { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 18px; 
    color: #FFF; 
    text-decoration: none; 
    width:350px; 
} 
.body_contentRIGHT { 
    padding: 20px; 
    font-family: GeosansLight; 
    font-size: 16px; 
    color: #333; 
    text-decoration: none; 
    overflow:hidden; 
    width:350px; 
} 
#content_tab_top_right { 
    background-image:url(../img/container_topright.jpg); 
    background-repeat:no-repeat; 
    height:335px; 
    width:350px; 
    margin-bottom:0px; 
} 
#content_tab_center_right { 
    background-image:url(../img/container_centerright.jpg); 
    background-repeat:no-repeat; 
    width:350px; 
    height:311px; 
    margin-top:0px; 
} 
#content_tab_bottom_right { 
    background-image:url(../img/container_btmright.jpg); 
    background-repeat:no-repeat; 
    width:350px; 
    height:300px; 
} 
</style> 
    <div id="column_left_container" style="display:inline-block"> 
     <div id="content_tab_top_left"> 
      <div class="body_titles"> 
      Title 
      </div> 
       <div class="body_content"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        <br /> 
       </div> 
       </div> 
    <div id="content_tab_center_left"> 
      <div class="body_titles"> 
      Title 
      </div> 
     <div class="body_content"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
      Test<br /> 
        Test<br /> 
       </div> 
    </div> 
    <div id="content_tab_bottom_left"> 
      <div class="body_titles"> 
      Title 
      </div> 
       <div class="body_content"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
      </div> 
     </div> 
    </div> 
     <div id="column_right_container" style="display:inline-block"> 
       <div id="content_tab_top_right"> 
        <div class="body_titlesRIGHT"> 
        Title 
        </div> 
       <div class="body_contentRIGHT"> 
        Content 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Test<br /> 
        Tests<br /> 
        Test<br /> 
        Test 
        </div> 
     </div> 
      <div id="content_tab_center_right"> 
        <div class="body_titlesRIGHT"> 
        Title 
        </div> 
         <div class="body_contentRIGHT"> 
          Content 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Tests<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          <br /> 
          <br /> 
         </div> 
      <div id="content_tab_bottom_right"> 
        <div class="body_titlesRIGHT"> 
        Title 
        </div> 
         <div class="body_contentRIGHT"> 
          Content 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Tests<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
          Test<br /> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

，如果你正在尋找一個快速解決，你#content_tab_top_right DIV應該有333px的高度。我的猜測是（無需在編輯器中查看文件）在背景圖像的末尾有2個像素的空白區域