亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我的 div 列溢出以及如何使它們與容器齊平?

為什么我的 div 列溢出以及如何使它們與容器齊平?

繁華開滿天機 2023-10-17 15:02:08
我正在 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 回答

?
鳳凰求蠱

TA貢獻1825條經驗 獲得超4個贊

我認為您可以使用網格輕松構建該布局。

代碼沙盒

基本上你可以在父元素中定義列

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

}

https://img1.sycdn.imooc.com/652e31c90001ee1c20321287.jpg

查看完整回答
反對 回復 2023-10-17
?
慕哥6287543

TA貢獻1831條經驗 獲得超10個贊

使用如下所示的溢出:隱藏功能

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

該功能將阻止任何內容離開您的父 div,這樣您就可以調整父 div 的大小以適合您需要的內容,并且它將阻止內容出現在外部


查看完整回答
反對 回復 2023-10-17
?
嗶嗶one

TA貢獻1854條經驗 獲得超8個贊

你可以使用以下方法。添加你自己的類并根據它編寫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>



查看完整回答
反對 回復 2023-10-17
  • 3 回答
  • 0 關注
  • 154 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號