如何调整对象相对于其父对象的大小

问题描述 投票：0回答：2

我正在使用原始 html、css 和 js 创建一个计算器，并且正在设计计算器本身。但是，我遇到了调整按钮大小的问题，使其保持响应并相对于其容器“行”调整大小。

调整按钮尺寸以使其均匀、适合容器并确保它们保留在各自的容器中的最有效方法是什么？ 谢谢！

* {
    border: 1px solid black;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;
}

.calculator {
    padding: 3vh;
    height: 50vh;
    width: 40vh;
    display: flex;
    flex-direction: column;

}

.display {
    flex: 1;
}

.buttons {
    flex: 6;
    display: flex;
    flex-direction: column;
    
}

.row {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
}

.num{
    margin: 1vh;
    position: relative;
    padding: 10%;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calculator</title>
        <link rel="stylesheet" href="calculator.css">
    </head>
    <body>
        <h1>Calculator</h1>
        <div class="container">
            <div class="calculator">
                <div class="display">1 + 1</div>
                <div class="buttons">
                    <div class="row row1">
                        <button class="num">7</button>
                        <button class="num">8</button>
                        <button class="num">9</button>
                        <button class="num op sub">-</button>
                        <button class="num op div">÷</button>
                    </div>
    
                    <div class="row row2">
                        <button class="num">4</button>
                        <button class="num">5</button>
                        <button class="num">6</button>
                        <button class="num op add">+</button>
                        <button class="num op mul">×</button>
                    </div>
    
                    <div class="row row3">
                        <button class="num">1</button>
                        <button class="num">2</button>
                        <button class="num">3</button>
                        <button class="num clr">CLR</button>
                        <button class="num op eq">=</button>
                    </div>
    
                    <div class="row row4">
                        <button class="num">0</button>
                        <button class="num">00</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="calculator.js"></script>
    </body>
</html>

html css flexbox
2个回答
2
投票

这是代码，不要使用边框作为*

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;

}

.calculator {
    padding: 3vh;
    height: 50vh;
    width: 20vw;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
}

.display {
    flex: 1;
    border: 1px solid #000;
}

.buttons {
    flex: 6;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #000;
}

.row {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
}

.num {
    width: 18%; /* Set a width to control button size */
    height: 100%; /* Make buttons fill the row height */
    padding: 10px; /* Add some padding for better touch */
    font-size: 1.5em; /* Increase font size for readability */
}
   <h1>Calculator</h1>
        <div class="container">
            <div class="calculator">
                <div class="display">1 + 1</div>
                <div class="buttons">
                    <div class="row row1">
                        <button class="num">7</button>
                        <button class="num">8</button>
                        <button class="num">9</button>
                        <button class="num op sub">-</button>
                        <button class="num op div">÷</button>
                    </div>
    
                    <div class="row row2">
                        <button class="num">4</button>
                        <button class="num">5</button>
                        <button class="num">6</button>
                        <button class="num op add">+</button>
                        <button class="num op mul">×</button>
                    </div>
    
                    <div class="row row3">
                        <button class="num">1</button>
                        <button class="num">2</button>
                        <button class="num">3</button>
                        <button class="num clr">CLR</button>
                        <button class="num op eq">=</button>
                    </div>
    
                    <div class="row row4">
                        <button class="num">0</button>
                        <button class="num">00</button>
                    </div>
                </div>
            </div>
        </div>

0
投票

结合 grid 和 flex，你可以自动完成工作。

注：

  • 除非别无选择，否则使用最小宽度而不是固定宽度/高度
  • 您可能希望使用文本输入而不是 div 进行显示，以提高可访问性，同时也以防万一您将使用 Javascript 添加交互性。
  • 如果需要，您可以在 
    .num
    类上使用 aspect-ratio: 1 / 1; 来保持正方形

* {
    border: 1px solid black;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;
}

.calculator {
    padding: 3vh;
    /* min-width & min-height instead of fixed lengths */
    /* But you could probaly delete those line in your case */
    min-height: 50vh;
    min-width: 40vh;
    display: flex;
    flex-direction: column;

}

.display {
    padding: 6px;
    flex: 1;
    display: grid;
    place-content: center;
}

.buttons {
    display: grid;
    row-gap: 6px; /* Vertical gap */
}

.row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns of same size */
    column-gap: 6px; /* Horizontal gap */
}

.num{
    padding: 6px;
}

/*
 * Optional
 * Each child in the row4 will take half of row's width
 */
.row4 {
    grid-template-columns: repeat(2, 1fr);
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calculator</title>
        <link rel="stylesheet" href="calculator.css">
    </head>
    <body>
        <h1>Calculator</h1>
        <div class="container">
            <div class="calculator">
                <div class="display">1 + 1</div>
                <div class="buttons">
                    <div class="row row1">
                        <button class="num">7</button>
                        <button class="num">8</button>
                        <button class="num">9</button>
                        <button class="num op sub">-</button>
                        <button class="num op div">÷</button>
                    </div>
    
                    <div class="row row2">
                        <button class="num">4</button>
                        <button class="num">5</button>
                        <button class="num">6</button>
                        <button class="num op add">+</button>
                        <button class="num op mul">×</button>
                    </div>
    
                    <div class="row row3">
                        <button class="num">1</button>
                        <button class="num">2</button>
                        <button class="num">3</button>
                        <button class="num clr">CLR</button>
                        <button class="num op eq">=</button>
                    </div>
    
                    <div class="row row4">
                        <button class="num">0</button>
                        <button class="num">00</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="calculator.js"></script>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.