时间戳

首页 > 解决方案 > 为什么我的 div 列溢出，如何使它们与容器齐平？

html - 为什么我的 div 列溢出，如何使它们与容器齐平？

问题描述

我在不使用 Bootstrap 的情况下用 HTML/CSS 创建一个基本的计算器。将有四列按钮 - 三列主要用于数字，一列用于操作员按钮（+、- 等）。操作员按钮列将有五个按钮，而不是其他容器中的四个。我希望按钮 div 彼此完全齐平，并与其周围的容器完全齐平。但是，我遇到了两个问题。

首先，当我尝试让每列按钮的宽度完全相等（25%）时，最后一列出现在框外。每列之间都有一个空格，我无法摆脱它。

其次，即使我将它们的高度设置为容器高度的百分比，这些盒子也会垂直运行。

我最终会摆脱按钮边框，但将它们包含在此处是为了更轻松地直观地显示出了什么问题。

html,
body {
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}

.mainBody {
  display: inline-block;
  width: 350px;
  height: 350px;
}

.outputWindow {
  width: 100%;
  height: 20%;
  border-bottom: 0px;
  background-color: rgb(164, 174, 177);
  text-align: right;
  line-height: 100px;
}

.buttonsBody {
  width: 100%;
  height: 80%;
  border-top: 0px;
  background-color: rgb(138, 142, 143);
}

.numColumn,
.operatorColumn {
  display: inline-block;
  width: 25%;
  height: 100%;
}

.numButton,
.operatorButton {
  line-height: 50px;
  border: 1px solid black;
}

.numButton {
  height: 25%;
}

.operatorButton {
  height: 20%;
}
<html>

<head>
  <title>Calculator</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div class="mainBody">
    <div class="outputWindow">Test </div>
    <div class="buttonsBody">
      <div class="numColumn">
        <div class="numButton">7</div>
        <div class="numButton">4</div>
        <div class="numButton">1</div>
        <div class="numButton">0</div>
      </div>
      <div class="numColumn">
        <div class="numButton">8</div>
        <div class="numButton">5</div>
        <div class="numButton">2</div>
        <div class="numButton">.</div>
      </div>
      <div class="numColumn">
        <div class="numButton">9</div>
        <div class="numButton">6</div>
        <div class="numButton">3</div>
        <div class="numButton">=</div>
      </div>
      <div class="operatorColumn">
        <div class="operatorButton">Del</div>
        <div class="operatorButton">÷</div>
        <div class="operatorButton">x</div>
        <div class="operatorButton">-</div>
        <div class="operatorButton">+</div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

标签： htmlcss

解决方案

使用溢出：隐藏功能如下所示

.buttonsBody {
  width: 100%;
  height: 80%;
  border-top: 0px;
  background-color: rgb(138, 142, 143);
  overflow: hidden;
}

该功能将阻止任何离开您的父 div，这样您就可以调整父 div 的大小以适应您需要的内容，它会阻止东西出现在外面

推荐阅读