文本在引导文本div中的图像越过宽度，如何对齐图像的宽度？

尝试将.header的背景调整为与图像宽度相同的大小，因此它会随图像响应而缩放。文本在引导文本div中的图像越过宽度，如何对齐图像的宽度？

这是codepen：https://codepen.io/jggrs/pen/owKdvz?editors=1100

HTML

<div class="container"> 
    <div class="row"> 

    <div class="first-column col-md-4 col-sm-6 col-xs-12"> 
    <div class="header">header</div> 
    <img class="img-responsive" src="https://unsplash.it/500"> 
    </div> 

    <div class="second-column col-md-4 col-sm-6 col-xs-12"> 
    <div class="header">header</div> 
    <img class="img-responsive" src="https://unsplash.it/500"> 
    </div> 

    <div class="third-column col-md-4 col-sm-6 col-xs-12"> 
    <div class="header">header</div> 
    <img class="img-responsive" src="https://unsplash.it/500"> 
    </div> 

    </div> 
    </div>

CSS

.first-column{background-color: #c0c0c0} 
    .second-column{background-color: #808080} 
    .third-column{background-color: #778899} 

    .header{ 
    position: absolute; 
    bottom: 0px; 
    background-color: red; 
    width: 100%; 
    color: #ffffff; 
    }

来源

2017-07-20 jggrs

头的位置是：绝对的;是不是要去响应的方式我认为 – Rienk

是啊，因为Rienik说，从.header删除'绝对'的位置，你会很好去 – BaDsHahSHIVAM

谢谢你们！那工作....噢，我的上帝，我在这上面花了太多时间 – jggrs

看看这个： Relative absolute positioning

.first-column{background-color: #c0c0c0} 
 
.second-column{background-color: #808080} 
 
.third-column{background-color: #778899} 
 

 
.header { 
 
    background-color: red; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 15px; 
 
    right: 15px; 
 
    float: bottom; 
 
} 
 

 
.col { 
 
    position: relative 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="first-column col col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="header">header</div> 
 
     <img class="img-responsive" src="https://unsplash.it/500"> 
 
    </div> 
 

 
    <div class="second-column col col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="header">header</div> 
 
     <img class="img-responsive" src="https://unsplash.it/500"> 
 
    </div> 
 

 
    <div class="third-column col col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="header">header</div> 
 
     <img class="img-responsive" src="https://unsplash.it/500"> 
 
    </div> 
 

 
    </div> 
 
</div>

来源

2017-07-20 20:49:26 eqwert

文本在引导文本div中的图像越过宽度，如何对齐图像的宽度？

回答

相关问题