Question

我正在寻找一种方法，在内容扩展时（如在手风琴菜单中）扩展某些内容的<div>

手风琴菜单位于带边框的div中。手风琴菜单中的每个下拉列表都包含一个图像滑块。

问题是当每个下拉列表展开时，div保持相同的高度。有没有办法扩展<div>围绕它包含的任何扩展内容？

这是我的div与手风琴菜单和手风琴下拉中的图像滑块...

<div id="contentbox">

        <div id="st-accordion" class="st-accordion">
            <ul>
                <li>
                    <a href="#">
                        Sculpture
                        <span class="st-arrow">Open or Close</span>
                        </a>
                        <div class="st-content">
        <div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
    <img src="images/crab.jpg" width="100"/>
</label>
<img src="images/crab.jpg"/>

<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
    <img src="images/dragon.jpg" width="100"/>
</label>
<img src="images/dragon.jpg"/>

<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
    <img src="images/oct.jpg" width="100"/>
</label>
<img src="images/oct.jpg"/>

<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
    <img src="images/octo.jpg" width="100"/>
</label>
<img src="images/octo.jpg"/>

<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
    <img src="images/shark.jpg" width="100"/>
</label>
<img src="images/shark.jpg"/></div></div></li></div>

以下是我的内容框CSS代码示例...

#contentbox {
z-index: 99999;
background-color:#000000; 
border: 2px solid red;
-moz-border-radius: 50px;
border-radius: 50px;
width:80%;
height:auto;
position: absolute;
top:100px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

下载手风琴菜单的CSS ......

.wrapper{
width:90%;
max-width:800px;
margin:30px auto;
}
.st-accordion{
width:100%;
min-width:270px;
margin: 0 auto;
}
.st-accordion ul li{
height: 100px;
border-bottom: 1px solid #c7deef;
border-top:1px solid #fff;
overflow: hidden;
}
.st-accordion ul li:first-child{
border-top:none;
}
.st-accordion ul li > a{
font-family: 'Josefin Slab',Georgia, serif;
text-shadow: 1px 1px 1px #fff;
font-size: 46px;
display: block;
position: relative;
line-height: 100px;
outline:none;
-webkit-transition:  color 0.2s ease-in-out;
-moz-transition:  color 0.2s ease-in-out;
-o-transition:  color 0.2s ease-in-out;
-ms-transition:  color 0.2s ease-in-out;
transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a span{
background: transparent url(../images/down.png) no-repeat center center;
text-indent:-9000px;
width: 26px;
height: 14px;
position: absolute;
top: 50%;
right: -26px;
margin-top: -7px;
opacity:0;
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color: #1693eb;
}
.st-accordion ul li > a:hover span{
opacity:1;
right: 10px;
}
.st-accordion ul li.st-open > a{
 color: #1693eb;
}
.st-accordion ul li.st-open > a span{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);
right:10px;
opacity:1;
}
.st-content{
padding: 5px 0px 30px 0px;
}
.st-content p{
font-size:  16px;
font-family:  Georgia, serif;
font-style: italic;
line-height:  28px;
padding: 0px 4px 15px 4px; 
}
.st-content img{
width:125px;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
@media screen and (max-width: 320px){
.st-accordion ul li > a{
    font-size:36px;
}
}

这是图像滑块的CSS（感谢所有帮助，如果你真的到目前为止）

.slider{
width: 640px; /*Same as width of the large image*/
position: relative;
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/

margin: 100px auto;

/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}

.slider input[name='slide_switch'] {
display: none;
}

.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;

float: left;
cursor: pointer;
transition: all 0.5s;

/*Default style = low opacity*/
opacity: 0.6;
}

.slider label img{
display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}

Answer 1

也许你可以尝试

.st-accordion ul li{
height: auto;
min-height: 100px;
}

如何在内容扩展时更改<div>高度？</div>

1 个答案: