Nano Hash - криптовалюты, майнинг, программирование

Как убрать разрыв между внутренними div и контейнерным div?

Кажется, я не могу понять, почему моя комната и разделы онлайн-пользователей не имеют одинаковой ширины (равномерно). Кроме того, по какой-то причине между каждым из них и контейнером div есть зазор. Например, слева от блока "Комнаты" есть пустое пространство, а затем граница контейнера блока. Я пытаюсь сделать так, чтобы там не было пустого белого пространства. То же самое происходит и с разделом «Онлайн-пользователи».

Я использую Bootstrap 4. Когда я проверяю элемент на странице, этот пустой пробел отображается как div.container.

Codepen.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="stylesheet" href="./css/all.min.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <!-- Content here -->
      <div class="room"><h4>Rooms</h4></div>
      <div class="chat">
        <div class="chat-box">
          <div class="message"></div>
          <div class="submit">
            <button type="button" class="btn btn-dark">Send</button>
          </div>
        </div>
      </div>
      <div class="online"><h4>Online Users</h4></div>
    </div>

    <script
      src="https://kit.fontawesome.com/02926adb38.js"
      crossorigin="anonymous"
    ></script>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

body {
  height: 100%;
}

.container {
  border: 1px solid #000000;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.chat {
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
}

.room {
  border: 1px solid #000000;
}

.online {
  border: 1px solid #000000;
}

.container .chat .chat-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
}

.container .chat .message {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  padding-left: 10px;
  border: 1px solid #000000;
}

.container .chat .submit {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
html css bootstrap-4
29.12.2019

Ответы:


1

Вы должны указать следующие классы равной ширины:

.room {
  border: 1px solid #000000;
  width: 100px;
}

.online {
  border: 1px solid #000000;
  width: 100px;
}

и самое внешнее дополнение <div> как 0px

<div class="container" style="padding: 0px;">


html,
body {
  height: 100%;
}

.container {
  
  border: 1px solid #000000;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.chat {
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
}

.room {
  border: 1px solid #000000;
  width: 100px;
}

.online {
  border: 1px solid #000000;
  width: 100px;
}

.container .chat .chat-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
}

.container .chat .message {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  padding-left: 10px;
  border: 1px solid #000000;
}

.container .chat .submit {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="stylesheet" href="./css/all.min.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container" style="padding: 0px;">
      <!-- Content here -->
      <div class="room"><h4>Rooms</h4></div>
      <div class="chat">
        <div class="chat-box">
          <div class="message"></div>
          <div class="submit">
            <button type="button" class="btn btn-dark">Send</button>
          </div>
        </div>
      </div>
      <div class="online"><h4>Online Users</h4></div>
    </div>

    <script
      src="https://kit.fontawesome.com/02926adb38.js"
      crossorigin="anonymous"
    ></script>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

29.12.2019

2

Container класс из начальной загрузки дает отступы. поэтому дайте нулевой отступ. Я дал 25% обоим .chat и .online <div> и вычислил ширину .chat. попробуйте реализовать это и посмотрите, работает ли это для вас.

.container {
  border: 1px solid #000000;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding : 0 !important;
}

.chat {
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
  width : calc(100% - 50%);
  padding : 0 !important;
}

.room {
  border: 1px solid #000000;
  width : 25%;
}

.online {
  border: 1px solid #000000;
  width : 25%;
}
29.12.2019
  • Спасибо большое. Знаете ли вы, как сделать комнаты и онлайн-пользователей одинаковой ширины? Я хочу, чтобы средний контейнер (чат) оставался одинаковой ширины. 29.12.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..