代码之家 › 专栏 › 技术社区 › Lautaro Rojas

如何使用css有意地包装元素?

frontend css html

Lautaro Rojas · 技术社区 · 2 年前

当我达到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;
}

1 回复 | 直到 2 年前

zielvna 2 年前

首先,您需要将图标放在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;
    }
}

Vishal Kalansooriya 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>

谢谢并致以最良好的问候!

推荐文章

Bear Bile Farming is Torture · 如何让div在溢出时水平滚动文本,而不是插入新行

2 年前

lucasferreira96 · 我可以同时使用Python和PHP吗?[已关闭]

2 年前

Tomas Gil Amoedo · 为什么我的形象没有触及这一边的边界?

2 年前

Hm Elius Hossain Himel · 为什么我们要在HTML5的body元素中写header和footer元素?

2 年前

Mateus Lima · 我怎么修?我需要一个透明的导航栏

2 年前

Mays Majeed · 安慰性反应

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

minsu123 · 如何解析react中的单个引用?

2 年前

Lautaro Rojas · 如何使用css有意地包装元素?

2 年前

Noob · 尝试访问React对象

2 年前