我有一个代码,其中有一个包含两列的Bootstrap行。一个带文字,另一个带图像。当使用position:absolute
调整浏览器窗口大小时,我添加了另一个div来将图像与中心对齐。现在图像对齐但行没有延伸到图像。
<div class="container-fluid about">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12 description">
Some text here...
</div>
<div class="col-md-4 col-sm-4 col-xs-12 image">
<div class="img-container">
<img src="#" class="img-responsive">
</div>
</div>
</div>
</div>
这是CSS ...
.about{
margin-top:60px;
min-height:300px;
background-color:#1E8BC3;
}
.about .row {
max-width:1000px;
min-height:300px;
}
.about .description{
padding-top:10%;
padding-left:5%;
font-size:16px;
color:#fff;
font-family: 'Josefin Sans', sans-serif;
}
.about .image{
padding-top:5%;
padding-left:0;
padding-right:5%;
}
.img-container{
position:absolute;
width:100%;
height:100%;
}
.img-container img{
display:block;
margin: 0 auto;
max-width:250px;
max-height:200px;
}
请帮我解释一下代码。
答案 0 :(得分:0)
我刚刚删除了以下部分,现在它可以了! :)
.img-container{
position:absolute;
width:100%;
height:100%;
}