javascript - Div 父级不会随内容自动调整高度

Question

我对 div 的背景有疑问。

<div class='new-vertical-slider'>
        <ul>
            <li>
                <div class="news-contenedor-li bg-gray">
                    <div class='col-md-1 col-sm-1 col-xs-1 news-day bg-gray'><h3>19</h3></div>
                    <div class='col-md-9 col-sm-9 col-xs-9'>
                        <a href="http://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a>
                        <p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p>                      
                    </div>  
                    <div class='col-md-2 col-sm-2 col-xs-2'><img src="http://i.imgur.com/Jmpoj3p.jpg" alt="Expandable Input" /></div>
                </div>
            </li>
            <li>
                <div class='col-md-1 col-sm-1 col-xs-1 news-day bg-orange' ><h3>24</h3></div>
                <div class='col-md-9 col-sm-9 col-xs-9'>    
                    <a href="http://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a>
                    <p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p>
                </div>  
                <div class='col-md-2 col-sm-2 col-xs-2'><img src="http://i.imgur.com/Jmpoj3p.jpg" alt="Expandable Input" /></div>
            </li>
            <li>
                <div class='col-md-1 col-sm-1 col-xs-1 news-day bg-orange'><h3>28</h3></div>
                <div class='col-md-9 col-sm-9 col-xs-9'>
                    <a href="http://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a>
                    <p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p>
                </div>  
                <div class='col-md-2 col-sm-2 col-xs-2'><img class='pull-right' src="http://i.imgur.com/Jmpoj3p.jpg" alt="Expandable Input" /></div>
            </li>
            <li>
                <div class='col-md-1 col-sm-1 col-xs-1 news-day bg-gray-strong'><h3>31</h3></div>
                <div class='col-md-9 col-sm-9 col-xs-9'>
                    <a href="http://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a>
                    <p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p>
                </div>  
                <div class='col-md-2 col-sm-2 col-xs-2'><img class='pull-right' src="http://i.imgur.com/Jmpoj3p.jpg" alt="Expandable Input" /></div>
            </li>
        </ul>
    </div>

这是CSS

    .new-vertical-slider {
    border: 0px solid #ccc;
    margin-bottom: 0px;
    margin-top: 10px;
}

.new-vertical-slider ul {
    padding: 0;
    list-style: none;
}

.new-vertical-slider li {
    border: 0px;
    padding-bottom: 15px;
}
.new-vertical-slider li:last-child {
    padding-bottom: 0px;
}


.new-vertical-slider li:after {
    content: '';
    display: block;
    clear: both;
}


.new-vertical-slider li a {
    color: #4d4d4d;
    text-transform: uppercase;
}

.new-vertical-slider li a:hover {
    color:  #fc8020;
}

.new-vertical-slider img {
    width: 100%;
}

.new-vertical-slider a {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #06f;
}

.new-vertical-slider p {
    margin: 2px 0 0;
    font-size: 11px;
}

.news-title {
    margin-top: 5px;
}

.news-day {
    color: white;
    font-style: bold;
    padding-right: 2px;
    padding-bottom: 2px;
    font-family: "Arial Black";
}

.news-contenedor-li {
    height: 100%;
    padding-bottom: 10px;
}
.bg-orange {
    background: #fc8020;
}
.bg-gray-strong {
    background: #cccccc;
}
.bg-gray {
    background: #eaeaea;
}
.bg-orange-light{
    background: #fcf2ea;
}
.hr-news-top {
    margin-bottom: 10px;
    margin-top: 0px;
}
.hr-news-bottom {
    margin-top: 10px;
    margin-bottom: 0px;
}

我正在使用 EasyTicker(jQuery 插件)来滑动新闻，但高度有问题。正如您在图像中看到的，div 高度不会根据 div 的内容进行调整。

Answer 1

在 .new-vertical-slider 类上添加这个 css overflow: auto :

.new-vertical-slider {
    border: 0px solid #ccc;
    margin-bottom: 0px;
    margin-top: 10px;
    overflow: auto;
}

并为其他父 div 执行此操作并删除 height:100%;。对不起，我没有时间全部写完。