html - 你如何消除内部 div 和容器 div 之间的差距？

我似乎无法弄清楚为什么我的房间和在线用户的 div 宽度不同(均匀分布)。此外，由于某种原因，它们与容器 div 之间存在间隙。例如，在“房间”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/popper.js@1.16.0/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;
}

最佳答案

您必须为以下类提供相等的宽度:

.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/popper.js@1.16.0/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>

关于html - 你如何消除内部 div 和容器 div 之间的差距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59521801/

html - 你如何消除内部 div 和容器 div 之间的差距？

上一篇：html - 调整页面大小时图像向左或向右移动

下一篇：javascript - jQuery 圆形菜单