我该如何解决这个div?

时间:2014-06-15 18:32:26

标签: html css wrapper

我试图修复我的图像之间的小间距,从某种意义上形成一个完整的图像。这是一张图片:http://gyazo.com/ecaf4c33f97c6ad4de9d4276809daea6 - 我在谈论导航栏上橙色线下方的浅蓝色线条。

#wrapper {
    width: 800px;
    height: auto;
    background-color: #5c6376;  
    margin: auto;
    margin-top: 12em; 
    padding: 0px;
}

#topMenu {
    min-height: 100%;
    min-width: auto;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
}

#body1 {
    min-height: 100%;
    min-width: auto;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
    position:relative;
}

#text {
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    font-family: Arial;
    right: 735px;
}

#body2 {
    min-height: 100%;
    min-width: auto;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
}

#body3 {
    min-height: 100%;
    min-width: auto;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
}

HTML:

<div id="wrapper">
    <div align = "center">
        <img src="img/top-bar.png" width="1017" height="87" alt="" id="topMenu">    
    </div>
    <div align = "center">
        <h2 id="text">Test</h2>
        <img src="img/body1.png" width="1017" height="445" alt="" id="body1">
    </div>
    <div align = "center">
        <img src="img/body2.png" width="1017" height="445" alt="" id="body2">
    </div>
    <div align = "center">
        <img src="img/body3.png" width="1017" height="366" alt="" id="body2">
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

为什么不尝试使用

#body1 {
min-height: 100%;
min-width: auto;
height: auto;
width: 100%;
position:relative;
top:-10px;
left: 0;
}

如果top:-10px不起作用,请尝试使用该值,直到差距消失