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

时间：2019-12-29 17:41:10

标签： html css bootstrap-4

我似乎无法弄清楚为什么我的房间和在线用户div的宽度不一样（均匀分布）。 同样，由于某些原因，它们每个与容器div之间也存在间隙。 例如，在“ Rooms” div的左侧，空白是空白，然后是div容器边框。我正在尝试使其没有空的空白。 “在线用户” div也会发生相同的情况。

我正在使用Bootstrap4。当我检查页面元素时，该空白显示为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;
}

2 个答案:

答案 0 :(得分：2)

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

.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>

答案 1 :(得分：1)

引导程序中的

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%;
}
相关问题
最新问题