Question

您好我的CSS朋友们！所以，今天我遇到的幻灯片问题没有出现在我找不到的某种溢出问题上。我知道这是溢出因为当我将其更改为“可见”幻灯片显示时，但我的内容背景消失了，我无法弄清楚为什么会发生这种情况。我已经在这个网站和其他人试图找到类似的问题进行了广泛的研究，但我似乎找不到类似的东西。

以下是解释事情的代码：

内容的CSS：

#body {
background:none #000;
margin-top:21px!important;
}
#body.home {
border:1px solid #4f4f4f;
margin:0 auto;
width:1100px;
}
#body.home div:first-child {
overflow:hidden;
}
#body.home div:first-child div:first-child {
border-bottom:0px solid #4f4f4f;
border-right:1px solid #4f4f4f;
float:left;
padding:0 0 13px;
width:510px;
}
#body.home div:first-child div:first-child h2 {
margin:13px 0 0 20px;
}
#body.home div:first-child div:first-child h2 a {
color:#fff;
font-family:oswaldregular;
font-size:18px;
font-style:normal;
font-weight:400;
line-height:18px;
margin:0;
text-decoration:none;
text-transform:uppercase;
}
#body.home div:first-child div:first-child p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:16px 0;
padding:0 30px 0 20px;
}
#body.home div:first-child div:first-child p a {
color:#a5a5a5;
font-style:normal;
margin:0;
text-decoration:underline;
}
#body.home div:first-child div:first-child a {
color:#af0000;
font-size:14px;
font-style:italic;
line-height:18px;
margin:0 0 0 20px;
text-decoration:none;
}
#body.home div:first-child div:first-child a:hover {
color:#ff0000;
text-decoration:none!important;
}
#body.home div:first-child ul {
border-bottom:1px solid #4f4f4f;
list-style:none;
margin:0;
overflow:hidden;
padding:0;
}
#body.home div:first-child ul li:first-child {
border:none;
}
#body.home div:first-child ul li {
border-left:1px solid #4f4f4f;
float:left;
width:auto;
}
#body.home div:first-child ul li h3 {
margin:23px 0 5px 20px;
}
#body.home div:first-child ul li span {
color:#a5a5a5;
display:block;
font-size:14px;
line-height:18px;
margin:1px 0 24px 20px;
}
#body.home div:first-child ul li a img {
border-top:1px solid #4f4f4f;
}
#body.home div {
border-bottom:none;
overflow:hidden;
}
#body.home div div:first-child {
border-bottom:none;
border-right:0px solid #4f4f4f;
float:left;
width:510px;
}
#body.home div div:first-child ul {
border-bottom:none;
}
#body.home div div:first-child ul li:first-child {
width:238px;
}
#body.home div div:first-child ul li {
border-right:1px solid #4f4f4f;

padding:0;
width:239px;
}
#body.home div div:first-child ul li a {
display:block;
float:none;
}
#body.home div div:first-child ul li a img {
border-bottom:1px solid #4f4f4f;
}
#body.home div div:first-child ul li h4 {
margin:9px 30px 0 20px;
}
#body.home div div:first-child ul li h4 {
color:#fff;
float:none;
font-size:14px;
font-style:normal;
font-weight:700;
line-height:18px;
text-decoration:none;
}
#body.home div div:first-child ul li p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:1px 30px 0 20px;
}
#body.home div div:first-child ul li p a {
color:#a5a5a5;
display:inline;
float:none;
font-style:normal;
margin:0;
text-decoration:underline;
}
#body.home div div {
float:left;
width:510px;
}
#body.home div div h3 a {
color:#FFF;
font-family:oswaldregular;
font-size:18px;
font-style:normal;
font-weight:400;
line-height:18px;
text-decoration:none;
text-transform:uppercase;
}
#body.home div div ul {
list-style:none;
margin:0;
padding:0;
}
#body.home div div ul li {
border-top:1px solid #4f4f4f;
overflow:hidden;
}
#body.home div div ul li a {
display:block;
float:left;
margin:0 20px 0 0;
}
#body.home div div ul li a img {
border-right:0px solid #4f4f4f;
}
#body.home div div ul li div {
width:298px;
}
#body.home div div ul li div span {
color:#a5a5a5;
display:block;
font-size:11px;
line-height:18px;
margin:11px 0 0;
}
#body.home div div ul li div h4 {
color:#fff;
float:none;
font-size:14px;
line-height:16px;
text-decoration:none;
}
#body.home div div ul li div p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:2px 0 0;
}
#body.home div div ul li div p a {
color:#a5a5a5;
display:inline;
float:none;
margin:0;
text-decoration:underline;
}
#body.home div div ul li div p a.more {
color:#AF0000;
display:inline;
float:none;
font-size:14px;
font-style:italic;
line-height:18px;
text-decoration:none;
}
#body.home div div ul li div p a.more:hover {
color:#ff0000!important;
text-decoration:none!important;
}

控制我正在使用的溢出的代码是第三个：

    #body.home div:first-child {
overflow:hidden;
}

当我将其更改为可见时，这是唯一进行任何更改的人。

这是幻灯片的CSS：

#slider {
position: relative;
width: 500px;
margin: 0px auto 0px auto;
}

#slider .viewer {
width: 500px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}

#slider .viewer .reel {
display: none;
height: 500px;
}

#slider .viewer .reel .slide {
position: relative;
width: 500px;
height: 500px;
}

最后，这里是内容的html：

<div id="body" class="home">
    <div>
        <div><br><br>
            <h2><a href="index.html">Welcome to our site!</a </h2>
            <p>
                Text. Text. Text. Text. 
            </p>
            <a href="services.html">Read More</a>         </div>

            <div id="slider">
                <div class="viewer">
                    <div class="reel">

                            <div class="slide"><img src="/images/img1.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img2.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img3.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img4.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img5.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img6.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img7.jpg" width="500" height="500" align="center" title=" " /></div>
                            <div class="slide"><img src="/images/img8.jpg" width="500" height="500" align="center"  title="" /></div>
                            <div class="slide"><img src="/images/img9.jpg" width="500" height="500" align="center" title="" /></div>


                    </div>
                </div>
            </div>
  </div>

</div>
            <script type="text/javascript">
            $('#slider').slidertron({
                viewerSelector: '.viewer',
                reelSelector: '.viewer .reel',
                slidesSelector: '.viewer .reel .slide',
                advanceDelay: 6000,
                speed: 'slow'
            });
        </script>

如果您可以在幻灯片显示的任何地方看到任何溢出的位置，请告诉我，因为我已经查看了这段代码几天了，我无法看到任何地方有溢出的地方。哎呀！

提前感谢您的时间和帮助。

Answer 1

我固定了它！ div div浮动到左边，所以我尝试将浮动更改为'none'，我们就在那里。背景突然出现在一切之后。我必须保持溢出仍然可见幻灯片显示，但只要我有背景和幻灯片，我不介意。我不认为这有任何问题，因为它是一个静态页面。我要感谢所有人的时间和他们提出的建议。周末休息一下！

无法找到来自CSS的溢出位置

1 个答案: