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%; 。 對不起，我沒有時間寫這一切。

Answer 2

使用顯示解決問題：.news-contenedor-li上的inline-block

.news-contenedor-li {
height: 100%;
display: inline-block;

}