如何使用HTML和CSS创建完全灵活的钢琴键盘 [英] How to create a completely flexible piano keyboard with HTML and CSS

问题描述

我正在尝试创建一个钢琴键盘，该键盘将使用flex box保持其元素比例，但是一旦我开始更改窗口大小，似乎无法使黑色音符保持相同的宽度或高度.

I'm trying to create a piano keyboard that will keep it's elements ratios using flex box, but can't seem to make the black notes stay the same width or height once I start changing the window size.

这是小提琴

body{
width: 800px;
height: 200px;
display: flex;
}

#kbd {

padding: 1%;
flex-flow: column;
display: flex;
flex: 4;
}

#keys {
display: flex;
flex: 8;
justify-content: center;
}


.note {
flex: 1;
display: inline-flex;
align-items: center;
}

.black {
justify-content: center;
position: absolute;
height: 45%;
background-color: #474747;
color: white;
width: 8%;
margin: 0 -4%; 
}

.white {
flex-flow: column;
justify-content: flex-end;
outline: 2px solid #474747;
color: #474747;
background-color: #ffffff;
padding-bottom: 1%;
}

推荐答案

百分比高度是根据第一个定位的父代的高度计算的.在这种情况下，#keys和#kbd div没有position CSS规则.这意味着黑键是根据主体的宽度而不是其直接父项来缩放的.

Percentage height is calculated based on the height of the first positioned parent. In this case, the #keys and #kbd divs don't have a position CSS rule. This means the black keys are scaled based on the width of the body, instead of their direct parent.

在#keys div中添加position: relative;以使其正常工作.

Add position: relative; to the #keys div to make it work properly.

这篇关于如何使用HTML和CSS创建完全灵活的钢琴键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！