我有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>
答案 0 :(得分:2)
如果您正在寻找快速修复,您的#content_tab_top_right div的高度应为333px。我的猜测是(在编辑器中没有查看文件)你的背景图像末尾有2个像素的空白区域