爲什麼父母不會調整它的內容寬度？

我可能真的很累，但我不能爲了我的生活找出爲什麼display: inline-block不能使父母的寬度適應其內容的大小。我試過尋找其他的解決方案，但是我發現的每一個資源都說要把inline-block加到父母身上才行。爲什麼父母不會調整它的內容寬度？

在下面的例子中，我試圖讓藍方只延伸到綠色廣場的邊緣，然後最終通過margin: 0 auto;中心內容：

#intro { 
 
    height: 400px; 
 
    background-color: red; 
 
} 
 
.slide-txt { 
 
    display: inline-block; 
 
    width: 30%; 
 
    background-color: lime; 
 
} 
 
.slide-box { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    background-color: blue; 
 
}

<section id="intro" class="image-slider"> 
 
    <div class="container" id="intro-slide"> 
 
    <div class="slide-box">  
 
     <img src="http://www.jkoffset.com/assets/images/Packaging1.jpg" alt="same-box-slide" width="150px"> 
 

 
     <div class="slide-txt"> 
 
     <h1 class="title">Headline <span>Goes Here</span></h1> 
 
     <div class="caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
      <a class="btn" href="#"> 
 
      Learn More 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

https://jsfiddle.net/eam0mk47/

來源

2016-12-07 Heather

請勿在此類中使用寬度％.slide-txt ...使用px代替 – Chiller

這樣做。謝謝。如果您將其作爲答案提交，我會將其標記爲已解決。 – Heather

在div孩子使用width:30%;（.slide-TXT）將使父DIV擴大，以填補另外的70％，因此要避免這一點，使其根據內容需要用像素來代替％調整在div小孩。

來源

2016-12-07 07:21:25 Chiller

作品！ https://jsfiddle.net/xuy8c76t/ – Heather

乾杯，我很高興它幫助:)！ – Chiller

在那個紅色的#intro是一個帶有.container類的div ...這個元素通過bootstrap左右填充。

只需去除填充： https://jsfiddle.net/eam0mk47/1/

#intro .container { 
    padding: 0px; 
}

或者不使用該類那裏。

來源

2016-12-07 07:11:16

藍色方塊仍然佔據整個寬度，而不是像它的兒童一樣寬（停在石灰盒之後）。 – Heather

爲什麼父母不會調整它的內容寬度？

回答

相關問題