【问题标题】：How to create a completely flexible piano keyboard with HTML and CSS如何使用 HTML 和 CSS 创建一个完全灵活的钢琴键盘
【发布时间】：2015-04-15 16:57:06
【问题描述】：

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

这是fiddle

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

【问题讨论】：

请在问题中包含代码

标签： css html flexbox css-shapes piano

【解决方案1】：

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

将position: relative; 添加到#keys div 以使其正常工作。

【讨论】：

【解决方案2】：

Demo @ Codepen

Flexbox 不是必需的。响应式键盘布局可以通过以下方式实现：

与每个键的注释对应的其他类选择器：

<div class="key white c"      </div>
<div class="key black c_sharp"</div>
<div class="key white d"      </div>
<div class="key black d_sharp"</div>
<div class="key white e"      </div>
<div class="key white f"      </div>
<div class="key black f_sharp"</div>
<div class="key white g"      </div>
<div class="key black g_sharp"</div>
<div class="key white a"      </div>
<div class="key black a_sharp"</div>
<div class="key white b"      </div>

所有黑键和黑键之前的每个白键的边距，使用基于黑键大小的偏移量：

.a, .b, .d, .e, .g, .black{
  margin: 0 0 0 (-($blackKey_Width / 2) - $blackKey_BorderWidth);
}

以下关键放置属性：

.key{
  float:    left;
  position: relative;
}

黑键更高的z-index：

.white{
  z-index: 1;
}
.black{
  z-index: 2;
}

Viewport Units [vw, vh, vmin, vmax] 用于 (height & width) 选择器的 (width) 属性。您可以通过将黑键的大小设置为白键的百分比来使其更具动态性。

【讨论】：

你的 CSS 钢琴做得非常好，可能是我见过的最好的钢琴之一。如果我在我正在处理的 React 项目中使用你的 CSS 代码，你介意吗？我很乐意为您效劳。
@damon 谢谢，很高兴你发现它有用！随意在您的项目中使用它。

【解决方案3】：

位置应该是相对的而不是绝对的。此外，您应该将包含 div 的高度都设置为 100%。

参考小提琴链接： http://jsfiddle.net/924sefae/6/

#kbd {
  height: 100%;
  ...
}
#kbd {
  height: 100%;
  ...
}

.black {
  position: relative;
  ...
}

【讨论】：

【解决方案4】：

不确定您是否需要将黑键设为独立块，但这是一个示例

<body>
 <div class="note-container">
 <div class="white-note black-note"></div> 
 <div class="white-note black-note"></div>
 <div class="white-note"></div> 
 <div class="white-note black-note"></div>
 <div class="white-note black-note"></div> 
 <div class="white-note black-note"></div>
 <div class="white-note"></div> 
 <div class="white-note black-note"></div>
 <div class="white-note black-note"></div> 
 <div class="white-note"></div>
</div>

body {
  background: #000;
}

.note-container {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.white-note {
  position: relative;
  width: 10%;
  height: 400px;
  background: #fff;
  margin: 0 2px;
}

.white-note.black-note:after {
  content: "";
  position: absolute;
  top: 0;
  right: -25%;
  width: 50%;
  height: 50%;
  background: #000;
  z-index: 1;
}

【讨论】：