堆栈内存溢出
  简体   繁体   English

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

[英]How do you remove the gap between inner divs & container div?

 原文  2019-12-29 17:41:10  2   2    html/ css/ bootstrap-4

问题描述

I can't seem to figure out why my room and online user divs are not the same width (evenly spaced).我似乎无法弄清楚为什么我的房间和在线用户 div 的宽度不同（均匀间隔）。 Also, for some reason there is a gap between each of them and the container div.此外，由于某种原因，它们与容器 div 之间存在间隙。 For example, on the left side of the "Rooms" div there is empty white space and then the div container border.例如，在“房间”div 的左侧有空白区域，然后是 div 容器边框。 I'm trying to make it so that there's no empty white space there.我正在努力使那里没有空白区域。 The same thing happens for the "Online Users" div. “在线用户”div 也会发生同样的事情。

I am using Bootstrap 4. When I inspect element the page, that empty gap shows up as div.container.我正在使用 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;
}

2 个解决方案

解决方案1
 2 已采纳  2019-12-29 17:58:13

You have to give the following classes equal width :您必须为以下类提供相等的宽度：

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

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

and the outermost <div> padding as 0px最外面的<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>

解决方案2
 1  2019-12-29 17:48:30

Container class from bootstrap gives padding.引导程序中的Container类提供填充。 so give padding zero.所以给填充零。 I have given 25% to both .chat & .online <div> and calculated the width of .chat .我给了.chat和.online <div> 25%并计算了.chat的宽度。 try to implement this and see if this works for you.尝试实现这一点，看看这是否适合你。

.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%;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 删除 2 div 之间的间隙 - Remove gap between 2 divs 如何消除这两个div部分之间的差距？ - How do I remove the gap between these two div sections? 如何消除div标签之间的空白？ - How do I remove the gap between div tags? 消除div之间的差距？ - remove gap between div? 如何消除html中div之间的差距？ - How to remove the gap between div in html? 消除div标签之间的差距 - remove gap between div tags 如何调整内部div容器的高度以适合其他div - How to adjust inner div container height to fit with others divs 具有2个内部Divs的Container Div即将划分为外部div - Container Div with 2 inner Divs is breaking into outer div 如何删除div内和div之间的空格 - How to remove whitespace inside a div and between divs 如何消除导航栏和容器流体之间的间隙？ - How to remove a gap between navbar and container-fluid?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM