Question

我在页面上有元素，我需要设置height: auto，但它不会按我想要的方式工作。只有min-height可以使用，但是当它比这更大时，文本会转到下一个元素。重要的是，我正在重新下载模板。其他任何地方height: auto都在工作，但不在这里。我包括下面的代码。我已经尝试overflow: auto;，但它刚刚添加了min-height值的滚动条...

HTML：

    <section id="dates" class="full-wrapper parallax-wrapper dates"> <!-- Tour Dates -->
        <div class="parallax" data-velocity="-.3" data-fit="0">

            <div class="front-content dates">
                <h1>Koncerty</h1>
                <div class="spacer"></div>
                <div class="dates-wrapper">
                    <ul>
                        <li> <!-- List #2 --> <!-- max 5 Date Info elements per li -->
                            <div class="date-box"> <!-- Date Info 1 -->
                                <div class="info date">
                                    <div class="day">15</div>
                                    <div class="month">zář</div>
                                    <div class="year">2015</div>
                                </div>
                                <div class="info">
                                    <div class="city">Mladá Boleslav</div>
                                    <div class="place"><div class="ico"></div>Nádvoří hradu</div>
                                </div>
                                <div class="info">
                                    <div class="time"><div class="ico"></div>19:00 - 20:00</div>
                                    <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div>
                                </div>
                                <div class="clear"></div>
                            </div> <!-- end Date Info 1 -->

                            <div class="date-box"> <!-- Date Info 2 -->
                                <div class="info date">
                                    <div class="day">11</div>
                                    <div class="month">úno</div>
                                    <div class="year">2016</div>
                                </div>
                                <div class="info">
                                    <div class="city">Plzeň</div>
                                    <div class="place"><div class="ico"></div>
                                    Pod Lampou</div>
                                </div>
                                <div class="info">
                                    <div class="time"><div class="ico"></div>20:30 - 21:30</div>
                                    <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div>
                                </div>
                                <div class="clear"></div>
                            </div> <!-- end Date Info 2 -->

                            <div class="date-box"> <!-- Date Info 3 -->
                                <div class="info date">
                                    <div class="day">24</div>
                                    <div class="month">úno</div>
                                    <div class="year">2016</div>
                                </div>
                                <div class="info">
                                    <div class="city">Praha</div>
                                    <div class="place"><div class="ico"></div>Vagon</div>
                                </div>
                                <div class="info">
                                    <div class="time"><div class="ico"></div>21:00 - 22:00</div>
                                    <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div>
                                </div>
                                <div class="clear"></div>
                            </div> <!-- end Date Info 3 -->


                        </li>

                     </ul>     

                </div>

            </div>

            <div class="overlay"></div>
        </div>
    </section><!-- end Tour Dates -->

CSS：

#dates>div:nth-of-type(1) {
    background: url(../img/parallax/01.jpg) 50% 0% repeat-y fixed;
    background-color: #333333;
    margin: 0;
    height: auto !important;
  min-height: 200px;
    position: relative;
    width: 100%;
    text-align: center;
/*  background-size: 100%;*/

    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    -webkit-background-size: cover !important;
    -khtml-background-size: cover !important;
}
.parallax-wrapper.dates {
    height: auto;
  min-height: 200px;
    position: static;
    width: 100% !important;
    /*min-width: 1000px;*/
    margin: 0;
    padding: 0;
}

.parallax-wrapper.dates h1 {
color: white;
}

.front-content.dates{
    width: 500px;
    margin-left: -250px;
}
.dates-wrapper{
    width: 600px;
    height: auto;
  min-height: 200px;
    position: relative;
    overflow: hidden;
    margin-left: 10px;
}
.dates-wrapper ul li{
    float: left;
    width: 600px;
}

.date-box{margin-bottom: 12px;}
.date-box:last-child{margin-bottom: 0;}
.date-box .info{
    float: left;
    text-align: left;
    padding-left: 10px;
    color: #bbb;
    max-width: 170px;
    overflow: hidden;
    font-size: 14px;
}
.date-box .info div{position: relative;}
.date-box .info.date{
    width: 65px;
    height: 80px;
    background: #ee6c00;
    color: #fff;
    text-align: center;
    padding-left: 0;
}

Answer 1

解决！我必须为.front-content类添加异常，因为只有这个：

.front-content{
    position: absolute;
    left: 50%;
    z-index: 5;
}

所以我必须为.dates块编辑它：

.front-content.dates{
    position: relative;
    z-index: 5;
  padding: 5px 10px 25px 10px;
}

自动高度不起作用，只有最小高度

1 个答案: