第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

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

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

繁華開滿天機(jī) 2023-10-17 15:02:08
我正在 HTML/CSS 中創(chuàng)建一個(gè)基本計(jì)算器，而不使用 Bootstrap。將有四列按鈕 - 三列主要用于數(shù)字，一列用于操作按鈕（+、- 等）。操作員按鈕列將有五個(gè)按鈕，而不是其他容器中的四個(gè)按鈕。我希望按鈕 div 彼此完全齊平并與其周圍的容器齊平。但是，我遇到了兩個(gè)問題。首先，當(dāng)我嘗試為每列按鈕提供完全相同的寬度 (25%) 時(shí)，最后一列出現(xiàn)在框外。每列之間都有一個(gè)空格，我無法去掉它。其次，即使我將盒子的高度設(shè)置為其容器高度的百分比，盒子也會(huì)垂直移動(dòng)。我最終會(huì)去掉按鈕邊框，但將它們包含在這里是為了更容易地直觀地顯示出了什么問題。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貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊

我認(rèn)為您可以使用網(wǎng)格輕松構(gòu)建該布局。

代碼沙盒

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

.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

查看完整回答
反對(duì) 回復(fù) 2023-10-17
?
慕哥6287543

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊

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

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

該功能將阻止任何內(nèi)容離開您的父 div，這樣您就可以調(diào)整父 div 的大小以適合您需要的內(nèi)容，并且它將阻止內(nèi)容出現(xiàn)在外部


查看完整回答
反對(duì) 回復(fù) 2023-10-17
?
嗶嗶one

TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊

你可以使用以下方法。添加你自己的類并根據(jù)它編寫css。如果你不想使用bootstrap，你可以使用css grid，這對(duì)你來說很容易


<!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>



查看完整回答
反對(duì) 回復(fù) 2023-10-17
  • 3 回答
  • 0 關(guān)注
  • 150 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)