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来填充宽度父母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;
}

Answer 2

添加以下样式以修复它....

.es-cabin-pricing {
    width: 100%;
    left: 0;
}

.mkd-ptfs-item-content {
    position: relative;
}

如果你使用绝对位置，它将不会使用宽度100％，除非给定并且给出位置相对性以使类es-cabin-pricing获取与类mkd-ptfs-item-content相关的位置和宽度

嵌套div不填充父div的宽度

2 个答案: