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

在APIObjects课程中添加此css .new-vertical-slider：

overflow: auto

为其他父div执行此操作并删除.new-vertical-slider { border: 0px solid #ccc; margin-bottom: 0px; margin-top: 10px; overflow: auto; } 。对不起，我没时间写这些。

Answer 2

使用display：inline-block on .news-contenedor-li

解决了问题

tbl_storefinder_stores

}