为什么父母不会调整它的内容宽度？

我可能真的很累，但我不能为了我的生活找出为什么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

为什么父母不会调整它的内容宽度？

回答

相关问题