Css 两个垂直div之间的空间
我有3个垂直堆叠的分区，问题是顶部和中心分区之间存在间隙。此外，用作背景的图像似乎在中心分区的底部被切断，因为图像的边界底部已消失（这是一个平面jpg，因此不是图形问题）。除此之外，这一叠div（右栏，上面提到的那个）和左一叠div（左栏）的高度不一样，虽然div和graphics的高度都一样：/n你可以在主页上看到我的意思：我在网上搜索了所有答案，这真的很难。例如，我尝试将行高设置为0，但没有效果，也许我尝试了所有这些错误，所以不要排除任何可能性。下面是一些代码：Css 两个垂直div之间的空间,css,Css,我有3个垂直堆叠的分区，问题是顶部和中心分区之间存在间隙。此外，用作背景的图像似乎在中心分区的底部被切断，因为图像的边界底部已消失（这是一个平面jpg，因此不是图形问题）。除此之外，这一叠div（右栏，上面提到的那个）和左一叠div（左栏）的高度不一样，虽然div和graphics的高度都一样：/n你可以在主页上看到我的意思：我在网上搜索了所有答案，这真的很难。例如，我尝试将行高设置为0，但没有效果，也许我尝试了所有这些错误，所以不要排除任何可能性。下面是一些代码： <style type
<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>
.机构名称{
填充：20px；
字体系列：GeosansLight；
字号：18px；
颜色：#FFF；
文字装饰：无；
宽度：600px；
}
.正文内容{
填充：20px；
字体系列：GeosansLight；
字体大小：16px；
颜色：#333；
文字装饰：无；
溢出：隐藏；
宽度：600px；
}
#列\左\容器{
浮动：左；
宽度：640px；
高度：946px；
}
#内容选项卡左上角{
背景图像：url（../img/container_top.jpg）；
背景重复：无重复；
高度：335px；
宽度：640px；
}
#内容\u选项卡\u中间\u左侧{
背景图像：url（../img/container_center.jpg）；
背景重复：无重复；
身高：311px；
宽度：640px；
}
#内容选项卡底部左侧{
背景图像：url（../img/container_btm.jpg）；
背景重复：无重复；
高度：300px；
宽度：640px；
}
#列\右\容器{
左边距：20px；
浮动：对；
宽度：350px；
高度：946px；
}
.正文标题右{
填充：20px；
字体系列：GeosansLight；
字号：18px；
颜色：#FFF；
文字装饰：无；
宽度：350px；
}
.body_content对吗{
填充：20px；
字体系列：GeosansLight；
字体大小：16px；
颜色：#333；
文字装饰：无；
溢出：隐藏；
宽度：350px；
}
#内容选项卡右上角{
背景图像：url（../img/container_topright.jpg）；
背景重复：无重复；
高度：335px；
宽度：350px；
边缘底部：0px；
}
#内容\u选项卡\u中心\u右侧{
背景图像：url（../img/container\u centerright.jpg）；
背景重复：无重复；
宽度：350px；
身高：311px；
边际上限：0px；
}
#内容选项卡底部右侧{
背景图像：url（../img/container_btmright.jpg）；
背景重复：无重复；
宽度：350px；
高度：300px；
}
标题
内容
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
标题
内容
测试
测试
测试
测试
测试
测试
测试
测试
测试
标题
内容
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
标题
内容
测试
测试
测试
测试
测试
测试
测试
试验
标题
内容
测试
测试
测试
测试
测试
测试
测试
测试
测试
标题
内容
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试