主页 / 问题 / 1422930
Accepted
Marie
Asked:2022-08-23 01:00:33 +0800 CST2022-08-23 01:00:33 +0800 CST

流体布局 - 如何管理标题块

  • 772

小伙伴们，你们好！请帮助橡胶布局：

我从移动版开始（您需要为移动设备、平板电脑和桌面版制作橡胶布局） - 我为手机制作布局，但出现问题是手机的块位于布局中一个在另一个之下，如在照片图中，在平板电脑和桌面 - 连续 - 我也画了，它们上的输入变成了徽标和配置文件按钮之间。我不明白如何实现它 - 或者读什么？谢谢！ 在此处输入图像描述

 <div class="header">
      <div class="header__section">
        <div class="header__item header__logo">
          <img src="img/logo.svg" alt="">
        </div>
        <div class="header__search">
          <input type="text" placeholder="Найти...">
        </div>
        <div class="header__item header__button-icon">
          <a href="#"><img src="img/profile-icon.svg" alt="profile-icon"></a>
        </div>
      </div>

    </div>

css вёрстка

4 个回答

  1. Best Answer

    例子

    *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  background-color: #f7f7f7;
}

.header__logo {
  background-color: #000;
  width: 4rem;
  height: 2rem;
}

@media (max-width: 576px) {
  .header__section {
    flex-wrap: wrap;
  }

  .header__search {
    order: 1;
    width: 100%;
    margin-top: .5rem;
  }

  .header__search input {
    width: 100%;
  }
}
    <div class="header">
  <div class="header__section">
    <div class="header__item header__logo">
      <img src="img/logo.svg" alt="">
    </div>
    <div class="header__search">
      <input type="text" placeholder="Найти...">
    </div>
    <div class="header__item header__button-icon">
      <a href="#"><img src="img/profile-icon.svg" alt="profile-icon"></a>
    </div>
  </div>
</div>

    • 3

  2. 哦，最疯狂的是设计师改变元素的流动。

    这是您的下一个流。

    台式机和平板电脑：

    <блок>
  <лого>
  <инпут>
  <что-то ещё>
</блок>

    然后在手机中，然后：

    <блок>
  <лого>
  <что-то ещё>
</блок>
<инпут>

    那么如何生活呢？

    有几种选择：

    选项1：

    我们在不同的地方使用两个“输入”，我们在台式机和平板电脑上显示一个，另一个在手机上显示。

    .header {
  display: block;
  width: 100%;
  color: #12153a;
}

.header__block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #12153a;
  width: 100%;
  padding: 1em 2em;
  box-sizing: border-box;
}

.header__input {
  display: block;
  width: 100%;
  background-color: #e3b6ea;
  border: 2px solid #12153a;
  padding: 1em 2em;
  box-sizing: border-box;
  text-align: center;
}

.header-input--desktop {
  margin: 0 2em;
}

.header-input--mobile {
  display: none;
  border-top: none;
}

@media (max-width: 768px) {
  .header-input--desktop {
    display: none;
  }
  .header-input--mobile {
    display: block;
  }
}
    <header class="header">
  <div class="header__block">
    <div class="header__logo">logo</div>
    <div class="header__input header-input--desktop">input</div>
    <div class="header__other">
      &lt;p&gt;
    </div>
  </div>
  <div class="header__input header-input--mobile">input</div>
</header>

    主要缺点是有两个元素本质上是相同的，如果你想挂一个监听器，你必须把它们都挂在两个上。

    选项 2：

    JS 将元素移动到另一个地方。

    const header__block = document.querySelector('.header__block'),
      header__input = document.querySelector('.header__input'),
      header__logo = document.querySelector('.header__logo'),
      mediaPhone = window.matchMedia('(max-width: 768px)');

ChangeHeaderInput(mediaPhone.matches);
mediaPhone.addListener(function(e) {ChangeHeaderInput(e.matches)});

function ChangeHeaderInput(isPhone) {
  MoveElement(header__input, isPhone ? header__block : header__logo);
}

function MoveElement(el, to) {
  to.after(el);
}
    .header {
  display: block;
  width: 100%;
  color: #12153a;
}

.header__block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #12153a;
  width: 100%;
  padding: 1em 2em;
  box-sizing: border-box;
}

.header__input {
  display: block;
  width: 100%;
  background-color: #e3b6ea;
  border: 2px solid #12153a;
  padding: 1em 2em;
  margin: 0 2em;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 768px) {
  .header__input {
    border-top: none;
    margin: 0;
  }
}
    <header class="header">
  <div class="header__block">
    <div class="header__logo">logo</div>
    <div class="header__input">input</div>
    <div class="header__other">
      &lt;p&gt;
    </div>
  </div>
</header>

    优点：甚至转移元素的事件和各种好东西也会转移。
    缺点：如果你需要传输很多东西并使用不同的媒体，你将不得不写很多 JS。

    选项 3：

    Flexbox，各种order变态，移动一个元素，以某种方式分离它，等等。

    我会写一个例子，但我已经累了，如果你有兴趣，我可以发出它，但稍后:)

    • 1

  3. 花车上的旧通用版本：

    main {
  overflow: hidden;
}

div {
  padding: .25em .5em;
  background: silver;
}

.logo {
  float: left;
  margin-right: 1em;
}

.icon {
  float: right;
  margin-left: 1em;
}

.input {
  overflow: hidden;
}

@media (max-width: 600px) {
  .logo, .icon {
    margin-bottom: .5em;
  }

  .input {
    clear: both;
  }
}
    <main>
  <div class="logo">logo</div>
  <div class="icon">icon</div>
  <div class="input">input</div>
</main>

    • 1

  4. 最简单和最现代的选择是使用网格：

    main {
  display: grid;
  gap: .5em 1em;
  grid-template: "logo input icon" / auto 1fr auto;
}

div {
  padding: .25em .5em;
  background: silver;
}

@media (max-width: 600px) {
  main {
    grid-template: "logo . icon" "input input input" / auto 1fr auto;
  }
}
    <main>
  <div style="grid-area: logo">logo</div>
  <div style="grid-area: input">input</div>
  <div style="grid-area: icon">icon</div>
</main>

    • 0

相关问题