我在firefox中获得了额外的空间,对于chrome和safari来说,它可以完美地工作。图像下方的额外空间。当我调整firefox浏览器的大小时,它会显示额外的空间。我该如何摆脱多余的空间?我测试了"盒子顺序组",使我的图像先显示,然后内容再显示。
我的代码是:
img {
width: 100%;
}
.music-wrapper {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.poster-content {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
.poster-wrap {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
<section class="row-wrap">
<div class="row-inner music-wrapper">
<div class="poster-wrap">
<img class="poster" src="http://dummyimage.com/420x420/000/fff">
</div>
<div class="poster-content">
<h1>Sunday</h1>
<p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
<a class="btn-wrap" target="_blank" href="#">
<div class="btn">listen now</div>
</a>
</div>
</div>
</section>
<section class="row-wrap">
<div class="row-inner music-wrapper">
<div class="poster-content">
<h1>Sunday</h1>
<p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
<a class="btn-wrap" target="_blank" href="#">
<div class="btn">listen now</div>
</a>
</div>
<div class="poster-wrap">
<img class="poster" src="http://dummyimage.com/420x420/000/fff">
</div>
</div>
</section>
也许您应该使用css flex
,它是您正在使用的box
的"新"版本。您可以在Css技巧和W3Schools 上了解更多信息
img {
width: 100%;
}
.music-wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.poster-content {} .poster-wrap {}
<section class="row-wrap">
<div class="row-inner music-wrapper">
<div class="poster-wrap">
<img class="poster" src="http://dummyimage.com/420x420/000/fff">
</div>
<div class="poster-content">
<h1>Sunday 1</h1>
<p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
<a class="btn-wrap" target="_blank" href="#">
<div class="btn">listen now</div>
</a>
</div>
</div>
</section>
<section class="row-wrap">
<div class="row-inner music-wrapper">
<div class="poster-content">
<h1>Sunday 2</h1>
<p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
<a class="btn-wrap" target="_blank" href="#">
<div class="btn">listen now</div>
</a>
</div>
<div class="poster-wrap">
<img class="poster" src="http://dummyimage.com/420x420/000/fff">
</div>
</div>
</section>