如何使用 css 有意包装元素？

Question

当我达到 440px 时，我想将 nav 分成两行：一行用于图标，一行用于按钮（每行应使用 100% 的宽度）。我不知道该怎么做。谢谢。

This 是我得到的。

HTML:

<div class="content">
     <h1>Hi! I'm Lautaro Rojas</h1>
     <h2>So one at were where</h2>
     <nav>
        <a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a>
        <a href="#"><img src="img/github.png" alt="GitHub" /></a>
        <a href="#"><img src="img/instagram.png" alt="instagram" /></a>
       <button>View Resume</button>
    </nav>
</div>

CSS:

.content nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.content nav a {
    margin-right: 39px;
}

.content a img {
    width: 40px;
    height: 40px;
}

Answer 1

首先你需要把你的图标放在里面 div:

<nav>
    <div>
        <a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a>
        <a href="#"><img src="img/github.png" alt="GitHub" /></a>
        <a href="#"><img src="img/instagram.png" alt="instagram" /></a>
    </div>
    <button>View Resume</button>
</nav>

然后您需要将此媒体标签添加到您的 css:

@media all and (max-width: 440px) {
    .content nav {
        flex-direction: column;
        align-items: center;
    }
}

Answer 2

您可以使用 CSS 媒体查询轻松地做到这一点。

@media screen and (max-width: 440px) {
    nav button{
        display: block;
        margin: 0px auto;
    }
}
@media screen and (min-width: 440px) {
    nav button{
        display: inline-block;
    }
}
nav{
    text-align: center;
}
nav a{
    display: inline-block;
}
.content a img {
    width: 40px;
    height: 40px;
}

<div class="content">
  <h1>Hi! I'm Lautaro Rojas</h1>
  <h2>So one at were where</h2>
  <nav>
    <a href="#"><img src="https://i.ibb.co/YWcKxJD/1.png" alt="1" /></a>
    <a href="#"><img src="https://i.ibb.co/YWcKxJD/1.png" alt="2" /></a>
    <a href="#"><img src="https://i.ibb.co/YWcKxJD/1.png" alt="3" /></a>
    <button>View Resume</button>
  </nav>
</div>

谢谢并致以最诚挚的问候！

如何使用 css 有意包装元素？

How to intentionally wrap an element using css?

html

css

frontend