Question

如何向下移动第三个元素，第一个带有徽标的块以及第二个其他全角包含另一个面板，而向下将是另一个面板？此块（pastenow.ru/57IX6）需要移动，并且必须像这样：pastenow.ru/57IXE

<nav class="navbar">

<!--start of top_panel-->
<div class="logo"><img src="img/logo.png" alt=""> </div>

<div class="panel"> 
    <div class="nav_title">С нами ловят все!</div>
    <div class="phone">8 800 553535</div>
    <div class="address_wrapper">
        <div class="address">Павлодар, ул. Мира 7</div>
        <div class="address">Павлодар, ул. Мира 8</div>
    </div>
    <div class="call_btn def_btn">Заказать звонок</div>
</div>
<!--end of top_panel-->
<!--start of bottom_panel-->
<div class="bottom_panel">
    <div class="main">Главная</div>
    <div class="about_us">компании</div>
    <div class="tournament">Турниры</div>
    <div class="goods">Товары</div>
    <div class="news">Новости</div>
    <div class="photo">Фото</div>
    <div class="video">Видео</div>
    <div class="contact">Контакты</div>
    <div class="social_icons_wrapper">
        <div ><a href="#" target="_blank"><i class="fa fa-youtube icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-instagram icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-vk icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-whatsapp icon_size" aria-hidden="true"></i></a></div>
        <div><a href="#" target="_blank"><i class="fa fa-telegram icon_size" aria-hidden="true"></i></a></div>
    </div>
</div>
<!--end of bottom_panel-->

如果添加flex-wrap：wrap;所以一切都掉了，但我只需要一个。

css

.container{
    width: 1170px;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    font-family: "Museo Cyrl 900";
}

.header_line{
    width: 100%;
    height: 122px;
    background-color: #fff;
}

.navbar{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}

.logo{
    width: 200px;
    height: auto;
}

.panel{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}
.bootom_panel{
    width: 100%;
    display:inline-flex;
    justify-content: flex-end;
}

Answer 1

我制作了一个Codepen演示，对您提供的布局进行了一些调整。请点击以下链接：https://codepen.io/ArunK_UI/pen/qwbXLm?editors=1100

这里的主要变化是我将上面板和下面板包装在一个包装纸中，然后赋予了它们各自的属性。

<div class="panel-wrap">
  <div class="panel"></div>
  <div class="bottom_panel"></div>
</div>

如何使用flexbox向下移动块中的第三个元素？

1 个答案: