1
我已经创建幻灯片使用html和css3。但问题是，当我设置孩子内容的绝对值的父div高度不起作用，也希望高度响应每个图像的高度。要父母的div高度响应绝对子值
这里是我的代码
/*slideshow start*/
/* fade slider */
.slides {
height:100%;
position:relative;
min-width: 100%;
//top:-110px;
overflow:hidden;
border: solid 1px #000;
}
.innerdiv
{
\t width:100% !important;
\t height:100% !important;
\t background-size: cover !important;
}
.slides ul {
list-style:none;
position:relative;
height:auto;
margin:0px;
padding:0px;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
width:100%;
height:auto;
padding-bottom:0px !important;
margin-bottom:0px !important;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
width:100%;
padding-bottom:0px !important;
margin-bottom:0px !important;
height:100%;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:1%;
opacity:1;
}
20% {
left:1%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:1%;
opacity:1;
}
20% {
left:1%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#d79e37;
box-shadow:5px 5px 15px #282828;
color:#FFFFFF;
font-size:26px;
padding:20px;
position:absolute;
left:0px !important;
margin:0px !important;
top:20%;
width:50%;
/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
.slides ul li div h2
{
\t font-size:230%;
\t text-height:50px !important;
\t font-weight:bold;
\t padding-bottom:0px !important;
\t margin-bottom:0px !important;
\t margin-top:0px !important;
}
.slides ul li div h3
{
\t
\t margin-top:5px !important;
\t color:#000;
\t font-weight:bold;
\t text-height:60px !important;
\t font-size:300%;
}
/*slideshow end*/<div class="slides">
\t \t \t <div class="innerdiv">
\t \t \t \t <ul> <!-- slides -->
\t \t \t \t \t <li><img src="images/banner1.jpg" alt="image01" />
\t \t \t \t \t \t <div><h2>ASPHALT DRUM MIX</h2><h3>PLANT</h3></div>
\t \t \t \t \t </li>
\t \t \t \t \t <li><img src="images/banner2.jpg" alt="image02" />
\t \t \t \t \t \t <div><h2>AEW CONCRETE</h2><h3>BATCHING PLANT</h3></div>
\t \t \t \t \t </li>
\t \t \t \t \t <li><img src="images/banner3.jpg" alt="image03" />
\t \t \t \t \t \t <div><h2>AEW</h2><h3>BROOMER</h3></div>
\t \t \t \t \t </li>
\t \t \t \t \t <li><img src="images/banner4.jpg" alt="image04" />
\t \t \t \t \t \t <div><h2>AEW PAVER</h2><h3>FINISHER</h3></div>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
您能工作吗？ – Mark