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

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

转载作者：太空宇宙更新时间：2023-11-03 22:10:50

我似乎无法弄清楚为什么我的房间和在线用户的 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/

文章推荐： c# - 如何在我的 Windows 服务之前启动 MYSQL 服务

文章推荐： c# - 我想在通过 C# 创建 Excel 工作簿后只添加一张工作表

文章推荐： c++ - OpenCV - 从 BGRA 输出创建 CV_8UC3(3 channel )垫

文章推荐： c# - 角度边界问题

IE7 中列表项之间的 CSS 差距
我无法消除 IE7 中列表项之间的差距。 HTML: row 1.1
javascript - 内容和面板之间的 JQueryMobile 差距
我用 jquery mobile 开发了一个 Phonegap 应用程序。它是一个单页应用程序，具有固定的页眉、固定的页脚和从左侧打开的面板。内容 DIV 为白色，面板从其默认颜色加载。问题是当面板
html - 列之间的 Bootstrap 差距
我在我当前的元素中使用了 bootstrap，它工作正常但只有一个故障: 我有 3 col-sm-6彼此相邻，当第二个col-sm-6比第一、第三长col-sm-6向左移动，第一个和第三个之间出现间隙
javascript - 关闭元素之间的 margin 差距
我目前正在创建一个网站。但是，我在缩小页面最右侧的边距差距时遇到了一些问题 As seen in this picture我尝试将 body 设置为 margin 0px，但这没有帮助。任何帮助都将不
css - 摆脱瓷砖之间的 OpenLayers 差距
我的 OpenLayers map 有问题。我无法让瓷砖一 block 挨着另一 block 。我已经检查过侵入式 CSS，但没有找到任何东西。有人可以帮我解决这个问题吗？我目前的代码是这样的:
html - 标题和导航栏 - css 问题(差距)
我在制作时遇到了问题我页面的标题链接展开以填满整个在我的网页中标记。下面似乎有一个缺口，我不知道如何修复它。我的导航栏也有类似的问题，随着我增加浏览器的大小，它不断扩展。尝试将鼠标悬停在这个
swift - iOS 13 奇怪的搜索 Controller 差距
当使用 Xcode 11 beta 5 在 iOS 13 beta 6 上运行应用程序时，我在呈现搜索结果 View Controller 时遇到了奇怪的间隙: 以下是如何设置的一些内容: let s
sql - 在特定条件和正确的 lead() 用法上跳过 SQL 差距
(PostgreSQL 8.4) 继续我的 previous example ，我希望通过窗口函数进一步理解间隙和孤岛处理。考虑下表和数据: CREATE TABLE T1 ( id SERIAL
javascript - PWA iOS 烦人的横向 20px 差距
我正在开发 PWA 网站。必须通过单击主屏幕图标来启动应用程序。问题是将 iPhone 旋转到横向位置后出现 20px 间隙。这个间隙超出了 Window 对象，所以我无法用 js 或 css 处理它
html - css vertical-alignment 应该在单元格位置是绝对的时候工作还是这是浏览器中的错误/差距
我注意到当位置设置为绝对时，表格单元格垂直对齐不起作用。我做错了什么吗？非工作 sample bottom alignament is
javascript - '差距://ready' is not getting served over https
我尝试添加各种标签并尝试添加相对路径:'//' 这些是我尝试过的各种meta标签我也尝试过为相对路径添加“//”。 execIframe.contentWindow.location
IE7 中的 CSS
- 差距
  我有一个 CSS 嵌套菜单在 IE 8 和 Firefox 中完美运行，但在 IE7 中它会在元素之间产生一个小间隙。这是我的 CSS: #nav, #nav ul { margin: 0;
- swift - SwiftUI 中两个 View 之间的 HStack 差距
  我正在尝试使用 SwiftUI 在 HStack 中有两个 View 。但是，我一直在两种观点之间存在差距。该问题出现在纵向和横向布局中。我的代码: struct ContentView: Vie
- css - SVG 差距 : wont completely fill the outer container
  我的 svg 左侧有一个小缝隙，我一辈子都无法修复它。请参阅下图了解我所指的内容。在左侧，您可以稍微看到图像。我在 Chrome 和 Firefox 上注意到这个问题。知道问题可能是什么吗？ .aw
- c++ - Visual Studio 2010 中新 ATL 项目的资源 ID 差距
  当我在 Visual Studio 2010 中创建一个全新的 ATL 项目时，资源 ID 102 和 105 被遗漏了。这是故意的还是错误？这些 ID 在项目后期有什么用吗？我可以重新排序编号以使用
- JQuery Mobile+Phone 差距 : How to implement a (table) list view with 2 sections
  我使用 JQuery Mobile+Phone Gap 实现了 TableView A Adam Kinkaid Alex Wickerham Avery Johnson B

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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