两个垂直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个像素的空白区域