为什么我的 div 列溢出以及如何使它们与容器齐平？
我正在 HTML/CSS 中创建一个基本计算器，而不使用 Bootstrap。将有四列按钮 - 三列主要用于数字，一列用于操作按钮（+、- 等）。操作员按钮列将有五个按钮，而不是其他容器中的四个按钮。我希望按钮 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>
繁华开满天机3回答
-
凤凰求蛊
我认为您可以使用网格轻松构建该布局。代码沙盒基本上你可以在父元素中定义列.buttonsBody { border-top: 0px; background-color: rgb(138, 142, 143); display: grid; grid-template-columns: 25% 25% 25% 1fr;}并尽量避免使用 display: inline-block;最后你需要添加盒子大小以避免盒子溢出* { box-sizing: border-box;} -
慕哥6287543
使用如下所示的溢出：隐藏功能.buttonsBody { width: 100%; height: 80%; border-top: 0px; background-color: rgb(138, 142, 143); overflow: hidden; }该功能将阻止任何内容离开您的父 div，这样您就可以调整父 div 的大小以适合您需要的内容，并且它将阻止内容出现在外部 -
哔哔one
你可以使用以下方法。添加你自己的类并根据它编写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>
随时随地看视频慕课网APP
相关分类
Html5