嵌套的div没有填充父div的宽度

-1

也许是因为它晚了，我超累了，但我有一个问题试图让嵌套的div留在父div的底部，也是充分的父div 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的宽度：

感谢您的帮助。

来源

2017-01-13 NFdesign

而不是张贴链接请添加您的相关代码 –

是的，看起来你太累了。您忘记添加代码而不是链接和图片。 – Justinas

抱歉代码现在有 – NFdesign

试试这个：

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

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

来源

2017-01-13 10:10:55

非常感谢，这很好。 – NFdesign

添加下面的样式来修复它....

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

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

如果使用绝对位置，它不会使用宽度100％，除非给出的相对位置赋予类别es-cabin-pricing占位置和宽度相关的类mkd-ptfs-item-content

来源

2017-01-13 10:14:14

设置宽度为100％没有工作，我以前试过，它是去父母的div之外，上面的回答上面的工作虽然 – NFdesign

嵌套的div没有填充父div的宽度

回答

相关问题