首先堆叠第二个元素然后堆叠第三个元素

Question

我有三个div。我希望它们在一行中，所以我使用了内联块。当我调整窗口大小时，第三个元素（nav）堆叠，然后第二个元素（searchBar）。我想要第一个元素堆栈然后第三个堆栈。用于撤消，第3个元素，然后是第2个元素。

＆＃13;

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

header {
  width: 100%;
  min-eight: 48px;
  position: fixed;
  background: #ffffff;
  padding-bottom: 5px;
  border-bottom: 2px solid #fed700;
}

nav {
  width: 489.7px;
  height: 18px;
  background: red;
  display: inline-block;
}

#searchBar {
  width: 330px;
  height: 16px;
  background: blue;
  display: inline-block;
  white-space: nowrap;
}

#logo {
  width: 220px;
  height: 32px;
  background: green;
  display: inline-block;
}

＆＃13;

<header>
  <div id=logo>logo
  </div>
  <div id=searchBar>searchBar
  </div>
  <nav>nav
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用带有最小宽度的内联块包装器，包裹nav和searchBar。这将根据您的要求提供您想要的结果，但可能会在现实世界中造成问题。

body {
  margin: 0px;
  padding: 0px;
}

header {
  width: 100%;
  min-height: 48px;
  position: fixed;
  background: #ffffff;
  padding-bottom: 5px;
  border-bottom: 2px solid #fed700;
}

.wrapper {
  min-width: 50%;
  display: inline-block;
}
nav {
  width: 489.7px;
  height: 18px;
  background: red;
  display: inline-block;
}

#searchBar {
  width: 330px;
  height: 16px;
  background: blue;
  display: inline-block;
  white-space: nowrap;
}

#logo {
  width: 220px;
  height: 32px;
  background: green;
  display: inline-block;
}

<header>
  <div id=logo>logo
  </div>
  <div class="wrapper">
   <div id=searchBar>searchBar
   </div>
   <nav>nav
   </nav>
  </div>
</header>