Сделать элемент плавающим вправо, но переполнить и прокрутить, если не хватает ширины - PullRequest
Новая
       42

Сделать элемент плавающим вправо, но переполнить и прокрутить, если не хватает ширины

1 голос
/ 29 апреля 2019

Я работаю над панелью навигации, которая будет работать на экранах любого размера.Для больших экранов это легко с двумя контейнерами float: left; и float: right;.Однако проблема в том, что когда экран становится слишком маленьким или когда контента слишком много, контейнеры идут в две отдельные строки, и это выглядит плохо.

Вот то, чего я хочу достичь (последний рисунок).Зеленый прямоугольник указывает область экрана (ширину экрана) и мое желаемое поведение элементов разной ширины.

hmm

Это код, который у меня есть на данный момент,с добавлением resize: horizontal; в корневой контейнер для упрощения тестирования. 

* {
  font-family: sans-serif;
}

nav {
  width: 400px;
  overflow: scroll hidden;
  background-color: #EEE;
  border: 2px solid black;
  resize: horizontal;
}

.nav-left {
  float: left;
  display: flex;
}

.nav-right {
  float: right;
  display: flex;
}

.nav-item {
  display: inline-block;
  background-color: #00C;
  color: #FFF;
  padding: 1rem;
}

.nav-item:hover {
  background-color: #08F;
}
<nav>
  <div class="nav-left">
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
  </div>
  <div class="nav-right">
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
  </div>
</nav>

1 Ответ

1 голос
/ 29 апреля 2019

Вместо с плавающей , почему бы не сделать nav также флексбоксом, учитывая, что вы уже используете flexbox для элементов nav-left и nav-right.

См. Демо ниже: 

* {
  font-family: sans-serif;
}

nav {
  width: 400px;
  overflow: scroll hidden;
  background-color: #EEE;
  border: 2px solid black;
  resize: horizontal;
  display: flex; /* added */
  justify-content: space-between; /* spread them horizontally */
}

.nav-left {
  float: left;
  display: flex;
}

.nav-right {
  float: right;
  display: flex;
}

.nav-item {
  display: inline-block;
  background-color: #00C;
  color: #FFF;
  padding: 1rem;
}

.nav-item:hover {
  background-color: #08F;
}
<nav>
  <div class="nav-left">
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
    <div class="nav-item">Left</div>
  </div>
  <div class="nav-right">
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
    <div class="nav-item">Right</div>
  </div>
</nav>
...