Question

我的HTML网页中有两个div。首先是顶部的标题，高度为77px。在这个div中还有下拉菜单。现在这下面是我的第二个Div，我想对齐中心的宽度为960px.Now，我的第一个div正在显示OK，而我的第二个Div显示第一个div标题的77px，而我想在第一个Div下面显示它。如果我删除padding:77px from .center我的第二个Div正在显示网页的最右边是指离中心960px并在网页中添加水平滚动条。另外第一个div的下拉进入第二个div内部，因此无法点击，因为它消失了。

这是两个div的HTML ..

<div class="header-wrapper">
</div>

 <div id="slideshow-carousel" class="center">               
        <ul id="carousel" class="jcarousel jcarousel-skin-tango">
            <li><a href="#" rel="p1"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p2"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p3"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p4"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p5"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p6"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p7"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
        </ul>
    </div>

这是CSS ..

.header-wrapper {
background: url("../img/.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;     
width: 100%;
height: 77px;
margin: 0 auto; 
}

 .center
{
padding-top: 77px;
margin: 0 auto;
width:70%; 
}
body {
font-family:arial;  
}

 img {
 border:0;
}

#slideshow-carousel {

width:960px;
position:relative
}

#slideshow-carousel ul {
margin:0; 
padding:0;
list-style:none;
}

#slideshow-carousel li {
background:#fff; 
height:583px; 
position:relative
}

#slideshow-carousel li .arrow {
left:3px; 
top:28px; 
position:absolute; 
width:20px; 
height:40px; 
background:url(images/arrow_white.png) no-repeat 0 0; 
display:block;
}

#slideshow-carousel li a {
background:#000; 
display:block; 
width:960px; 
height:583px;
}


#slideshow-carousel .active {
filter:alpha(opacity=100); 
-moz-opacity:1.0; 
-khtml-opacity: 1.0; 
opacity: 1.0;
}

#slideshow-carousel .faded {
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5;
}

以下是示例小提琴演示.. Fiddle

请帮帮我..很抱歉没有图片添加

Answer 1

尝试这样，我删除了.header-wrapper上的padding-top，margin: 0 auto;。我还添加了clear: both;以防止此div使元素左右对齐。

Fiddle

Answer 2

取边距：0自动;在.header-wrapper之外（元素的宽度是正文的100％，不需要居中），然后你可以从.center中删除填充顶部。

.header-wrapper {
    background: url("../img/.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    z-index: 60001;     
    width: 100%;
    height: 77px;
}

.center
{
    margin: 0 auto;
    width:70%; 
}

http://jsfiddle.net/J2uk5/1/

CSS在两个Div中的奇怪行为

2 个答案: