嵌套的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的寬度

回答

相關問題