为什么我的div列溢出了，我怎样才能使它们与它们的容器齐平？
为什么我的div列溢出了，我怎样才能使它们与它们的容器齐平？
提问于 2020-03-28 01:43:03
我在没有使用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>
回答 3
Stack Overflow用户
发布于 2020-03-28 01:56:55
使用overflow:隐藏功能，如下所示
.buttonsBody {
width: 100%;
height: 80%;
border-top: 0px;
background-color: rgb(138, 142, 143);
overflow: hidden;
}该功能将阻止任何离开父div的内容，这样您可以调整父div的大小以适应您需要的内容，并且它将阻止内容出现在外部
Stack Overflow用户
发布于 2020-03-28 04:27:49
我认为你可以使用网格很容易地构建这种布局。
基本上，您可以在父元素中定义列
.buttonsBody {
border-top: 0px;
background-color: rgb(138, 142, 143);
display: grid;
grid-template-columns: 25% 25% 25% 1fr;
}并尽量避免使用
display: inline-block;最后，您需要添加框大小，以避免框溢出
https://www.w3schools.com/css/css3_box-sizing.asp
* {
box-sizing: border-box;
}
Stack Overflow用户
发布于 2020-03-28 15:44:03
你可以使用下面的approach.Add你自己的类，并根据it.If编写css，你不想使用bootstrap，你可以使用css grid，这对你来说很容易。
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8"/>
<style>
html, body {
text-align: center;
font-family: 'Courier New', Courier, monospace;
width:100%;
}
.mainBody {
display: inline-block;
width: auto;
height: auto;
}
.outputWindow {
height: 20%;
border-bottom: 0px;
background-color: rgb(164, 174, 177);
text-align: right;
line-height: 100px;
padding:20px;
}
.buttonsBody {
border-top: 0px;
background-color: rgb(138, 142, 143);
}
.numColumn, .operatorColumn {
display: inline-block;
width: 100%;
height: 100%;
}
.numButton, .operatorButton {
width:20%;
float:left;
line-height: 50px;
margin:10px;
border: 1px solid black;
}
.numButton {
height: 25%;
}
.operatorButton {
height: 25%;
}
</style>
</head>
<body>
<div class="mainBody">
<div class="outputWindow">Test </div>
<div class="buttonsBody">
<div class="numColumn">
<div class="numButton">7</div>
<div class="numButton">8</div>
<div class="numButton">9</div>
<div class="numButton">Del</div>
</div>
<div class="numColumn">
<div class="numButton">4</div>
<div class="numButton">5</div>
<div class="numButton">6</div>
<div class="numButton">÷</div>
</div>
<div class="numColumn">
<div class="numButton">1</div>
<div class="numButton">2</div>
<div class="numButton">3</div>
<div class="numButton">x</div>
</div>
<div class="operatorColumn">
<div class="operatorButton">0</div>
<div class="operatorButton">.</div>
<div class="operatorButton">=</div>
<div class="operatorButton">-</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60891376
复制相关文章
相似问题
腾讯云开发者
