Почему мои div colums переполнены и как я могу сделать их flu sh с их контейнером? - PullRequest
Новая
       0

Почему мои div colums переполнены и как я могу сделать их flu sh с их контейнером?

0 голосов
/ 27 марта 2020

Я создаю базовый калькулятор c в HTML / CSS без использования Bootstrap. Там будет четыре столбца кнопок - три в основном для цифр, один для кнопок оператора (+, -, et c.). Столбец кнопок оператора будет иметь пять кнопок, а не четыре в других контейнерах. Я хочу, чтобы все кнопки 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 ]

0 голосов
/ 27 марта 2020

Я думаю, что вы можете легко создать этот макет, используя сетку.

Codesanbox

в основном вы можете определить столбцы внутри родительского элемента 

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

enter image description here

0 голосов
/ 28 марта 2020

Вы можете использовать следующий подход. Добавьте свой собственный класс и напишите css в соответствии с ним. Если вы не хотите использовать bootstrap, вы можете использовать css сетку, это будет легко для вас 

<!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>
0 голосов
/ 27 марта 2020

Используйте функцию переполнения: скрытая функция, показанная ниже 

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

Функция остановит все, что покидает ваш родительский div, таким образом, вы можете изменить размер родительского div в соответствии с тем, что вам нужно, и прекратить отображение вне

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...