html - 嵌套的div没有填满父div的宽度

Question

也许是因为时间太晚了，我太累了，但我在尝试让嵌套的 div 保留在父 div 的底部并成为父 div 内边距的全宽时遇到了问题。

网站在这里:http://www.ecoscapecabins.com/wp-2016/我指的是小木屋部分。 div class= es-cabin-pricing 它不会像上面的内容那样填充父 div。

    <div class="mkd-ptfs-item">
            <div class="mkd-ptfs-item-image">
        <a href="http://www.ecoscapecabins.com/wp-2016/portfolio-item/cabin-1-features/">
                                <img src="http://www.ecoscapecabins.com/wp-2016/wp-content/uploads/2016/10/cabin-1-362x263.jpg" alt="" width="362" height="263">                            </a>
    </div>
    <div class="mkd-ptfs-item-content">
        <h4 class="mkd-ptfs-item-title">
        <a href="http://www.ecoscapecabins.com/wp-2016/portfolio-item/cabin-1-features/">CABIN 1 FEATURES</a>
    </h4>
    <div class="mkd-ptfs-item-excerpt-holder">
        <p></p><p>Large Cedar Wrap-around Deck  •  Fully Equipped Kitchenette  •  Private River Rock Shower  •  Flat Screen Satellite TV •  Private Fire Pit  •  Queen Bed</p>
    <div class="es-cabin-pricing">
    <div class="es-cabin-left">May – Sep<br>
    <span class="es-price">$180/night</span></div>
    <div class="es-cabin-right">Oct – Apr<br>
    <span class="es-price">$130/night</span></div>
    </div>
    <div style="clear:both;"></div>
    </div>
</div>
    </div>

CSS =

    .es-cabin-pricing {
position: absolute;
bottom: 0px;
display: block;
float: none;
width: initial;


    .es-cabin-left {
width: 45%;
position: relative;
margin-bottom: 20px;
float: left;
display: block;


    .es-cabin-right {
width: 45%;
margin-left: 10px;
position: relative;
margin-bottom: 20px;
float: right;
display: block;

这就是我希望它以日期/价格查看底部的方式(我不能强制指定宽度，因为它们会缩放，这就是为什么我需要 es-cabin-pricing div 来填充父分区:

感谢您的帮助。

Answer 1

试试这个:

.mkd-ptfs-item-content {
    padding: 0 25px 20px;
    min-height: 230px;
    position: relative;
}

.es-cabin-pricing {
    position: absolute;
    bottom: 0px;
    left: 25px;
    right: 25px;
}