Позиции расположены рядом друг с другом - PullRequest
Новая
       9

Позиции расположены рядом друг с другом

0 голосов
/ 14 июля 2020

Я пытаюсь создать фиксированный верхний колонтитул, фиксированный нижний колонтитул с разделом между ними. Промежуточный раздел получит полосу прокрутки, если содержимое не умещается на экране. После большого разочарования мне удалось правильно отрисовать основной макет без использования таблиц: 

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="main-container">
    <div class="main-container top-bar">
      SOMETHING FIXED HERE
    </div>
    <div class="main-container main-view">
      <span class="special">Lorem</span><span class="special">ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate
      semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
    </div>
    <div class="main-container bottom-bar" id="bottom-bar">
      SOMETHING FIXED HERE
    </div>
  </div>
</body>

</html>

Однако элементы в средней области правильно отображаются только в том случае, если они не заключены в какой-либо тег. Как только я помещаю их в div или span, браузер (как минимум Chrome) настаивает на том, чтобы каждый тег занимал всю строку. Они не отображаются рядом, как я ожидал.

Я попытался создать «специальный» класс, как указано в приведенном выше примере, который я применил как к div, так и к диапазону. Оба дают одинаковый результат: «Lorem» и «ipsum» появляются в отдельных строках, а не бок о бок. Я пробовал разные вещи из других вопросов о переполнении стека на несколько связанных тем, включая «float: left» и дополнительное вложение с использованием «display: flex».

Я просто хочу применить некоторые стили и, возможно, сделать некоторые элементы интерактивными. Для этого их нужно обернуть чем-то вроде div или span. Кто-нибудь знает, как я могу заставить его отображать их рядом, а не каждый тег в отдельной строке?

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Ваша конкретная проблема заключается в том, что ваш класс .main-container имеет display: flex;, а затем вы добавили этот класс в верхний, центральный и нижний div, это свойство flex изменяет способ расположения дочерних элементов.

Похоже, вы не хотите связываться с расположением дочерних элементов основного (среднего) div, вы не хотите добавлять к этому div класс 'main-container'.

На самом деле , вы можете добиться того, чего хотите, гораздо проще: 

      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      
      .main-view {
        flex-grow: 1;
        overflow: scroll;
      }

Здесь мы делаем тело всегда 100vh (100% высота области просмотра) и меняем отображение на гибкий столбец направления. Установка этих свойств гибкости позволяет нам указать контейнеру main-view значение flex-grow, что означает заполнить оставшееся пространство родительского элемента, это сдвигает нижний колонтитул вниз до нижней части основного элемента (для которого установлено значение 100vh). 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      
      .main-view {
        flex-grow: 1;
        overflow: scroll;
      }
    </style>
</head>
<body>
  <div class="top-bar">
      SOMETHING FIXED HERE
  </div>
        <div class="main-view">
            <span class="special">Lorem</span><span class="special">ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
        </div>
        <div class="bottom-bar">
            SOMETHING FIXED HERE
        </div>
    </div>
</body>
</html>
1 голос
/ 14 июля 2020

Такова природа flexbox. Вы дали контейнеру свойство column для flex-direction. Элементы .special обрабатываются как гибкие элементы и располагаются в столбце. Просто оберните их все в div, чтобы у вас был один гибкий элемент, чтобы дисплей inline мог работать 

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
}
<div class="main-container">
  <div class="main-container top-bar">
    SOMETHING FIXED HERE
  </div>
  <div class="main-container main-view">
    <div>
      <span class="special">Lorem</span> <span class="special"> ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate
      semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
    </div>
  </div>
  <div class="main-container bottom-bar" id="bottom-bar">
    SOMETHING FIXED HERE
  </div>
</div>

В качестве альтернативы вы можете использовать flex-direction: row в своем гибком контейнере (в данном случае .main-view), чтобы ваши гибкие элементы могли отображаться "бок о бок "вместо того, чтобы складывать их в колонну. См. Пример ниже: 

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
  flex-direction: row;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
  margin-right: 10px;
}
<div class="main-container">
  <div class="main-container top-bar">
    SOMETHING FIXED HERE
  </div>
  <div class="main-container main-view">
    <span class="special">Lorem</span><span class="special">ipsum</span>Hello
  </div>
  <div class="main-container bottom-bar" id="bottom-bar">
    SOMETHING FIXED HERE
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...