1

对于即将到期的我的学校项目，我正在创建一个网站，其部分类似于此网站上的“我们的工作”和“跟随”部分：https ://bellafare.com/

我在 flexbox 的帮助下重新创建了它们，它们在 15 英寸笔记本电脑屏幕和 iphone 6/7/8 上看起来就像我想要的那样。然而！在宽度 646 到 978 之间，布局看起来很糟糕，因为其中一个或多个图像最终位于该行的下方。有没有办法通过媒体查询来解决这个问题，让它像在 bellafare 网站上一样，随着屏幕变小，div 的大小会变小，直到它在 iphone 6/7/8 平台上然后变成列？我尝试了几种选择，但我遇到了死胡同。另外，如何使文本最终出现在图像上？

html:


<div class="classes">
        <div><a href="#">Beginner<img src="bella1.png"/></a></div>
        <div><a href="#">Intermediate<img src="bella2.png"/></a></div>
        <div><a href="#">Advanced<img src="bella3.png"/></a></div>
        </div>

和


 <section class="ig">
        <header>
            <h3><i>follow along <a href="XXX">@XXX</a></i></h3>
        </header>
        <div class="iglinks">
        <div><a href="#"><img src="ig1.png"/></a></div>
        <div><a href="#"><img src="ig2.png"/></a></div>
        <div><a href="#"><img src="ig3.png"/></a></div>
        <div><a href="#"><img src="ig4.png"/></a></div>
        <div><a href="#"><img src="ig5.png"/></a></div>
        <div><a href="#"><img src="ig6.png"/></a></div>
        </div>
    </section>

CSS：


.classes {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
}

.ig {
    margin-top: 50px;
}

.iglinks {
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: space-around;
}

我将非常感谢我能得到的任何帮助。很抱歉，如果这是一个完整的菜鸟问题，我的焦虑正在加剧，所以我想我会试一试。

4

1 回答 1

1

用 nowrap 修复你的 flex-flow 

 .iglinks {
    flex-flow: row nowrap;
    }

并使您的图像具有响应性：

@media (min-width: 646px) and (max-width:978px){
  .iglinks img {
    width: 100%;
    height: auto;
  }
}

您可能需要添加一些填充

于 2019-09-19T20:13:09.263 回答