如何将锚定和IMG置于响应速度

Question

 <div class="testt">
        <div class="test">
            <img src="4.jpg">
            <a href="">test</a>
        </div>
        <div class="test">
            <img src="5.jpg">
            <a href="">test</a>
        </div>
        <div class="test">
            <img src="7.jpg">
            <a href="">test</a>
        </div>
        <div class="test">
            <img src="6.jpg">
            <a href="">test</a>
        </div>

如果您可以帮助我将图片成为一行，并且锚定在它们下方的锚点，并且对所有设备都响应

Answer 1

您可以在父上使用 display: flex;，并且将所有内容都放在一行上，给它一个相对的 width，以便用视口缩放，将 text-align: center;分配给 .testdivs，以中心内容。，并给出img A max-width: 100%，以使其与父尺寸缩放。

.testt {
  display: flex;
  width: 90%;
  margin: auto;
}
.test {
  text-align: center;
}
.test img {
  max-width: 100%;
  display: block;
}

<div class="testt">
  <div class="test">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
    <a href="">test</a>
  </div>
  <div class="test">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
    <a href="">test</a>
  </div>
  <div class="test">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
    <a href="">test</a>
  </div>
</div>