my page wants to put four book covers in a row, each with a fixed width, and if you zoom the browser, the spacing will be narrowed.
my problem now is that I don"t know how to adapt the spacing to the browser width. In addition, it is hoped that there is no margin between the leftmost and rightmost of the whole.
Let me ask you how to think.
my code:
<div class="four_cover">
<div class="row">
<div class="cover">
<img src="../images/book2.jpg" alt="">
<h3 class="title"></h3>
<p class="author_small">
</div>
</div>
<div class="row">
<div class="cover">
<img src="../images/book3.jpg" alt="">
<h3 class="title"></h3>
<p class="author_small"> /
</div>
</div>
<div class="row">
<div class="cover">
<img src="../images/book4.jpg" alt="">
<h3 class="title"></h3>
<p class="author_small">[]
</div>
</div>
<div class="row">
<div class="cover">
<img src="../images/book5.jpg" alt="">
<h3 class="title"></h3>
<p class="author_small">[]
</div>
</div>
</div>css:
.four_cover {
margin: 0 20px 0 20px;
}
.row {
width: 100%;
box-sizing: border-box;
display: inline;
.cover {
float: left;
width: 200px;
height: 290px;
box-shadow: 0px 4px 12px 0px rgba(0,0,0,.1);
margin: 0 114px 0 0;
img {
width: 100%;
height: 100%;
border-radius: .5rem 0 0 .5rem;
}
.title {
font-size: 1.25rem;
font-weight: 500;
margin: 1rem 0 0 0;
line-height: 1.875rem;
}
.author_small {
font-size: 0.875rem;
color: $T3;
line-height: 1.675rem;
margin: 0;
}
}
}
}