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

两个垂直div之间的空间

1 个答案: