Question

我试图将4个div对齐，就好像它们在键盘上对齐一样，但我无法让它工作......

我不希望它是绝对的，因为我有3组四个div。那些div应该在我有画布的页面的左边，它们基本上是我的javascript游戏的说明。

这是我的代码：

p.keyboard {
    display: inline-block;
    color: #5E5E5E;
    font: bold 10px arial;
    text-decoration: none;
    text-align: center;
    margin: 10px auto;
    padding: 7.5px 10px;
    background: #EFF0F2;
    border-radius: 4px;
    border-top: 1px solid #F5F5F5;
    box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
    text-shadow: 0px 1px 0px #F5F5F5;
}

<div id="green">
  <p class="keyboard">Z</p>
  <p class="keyboard">Q</p>
  <p class="keyboard">S</p>
  <p class="keyboard">D</p>
</div>
<div id="blue">      
  <p class="keyboard">Flèche haut</p>           
  <p class="keyboard">Flèche gauche</p>
  <p class="keyboard">Flèche bas</p>
  <p class="keyboard">Flèche droite</p>
</div>
<div id="red">
  <p class="keyboard">O</p>
  <p class="keyboard">K</p>
  <p class="keyboard">L</p>
  <p class="keyboard">M</p>
</div>

我尝试了多个东西，到处都有多个div标签，是否使用flexbox，但我显然不够好^^“。我基本上想要“Z”，“O”和“flèchehaut”高于其他三个并且居中。

感谢您的帮助......

Answer 1

首先，我不会使用paragraph标签。被视为<span> s，大多数浏览器都会为它们添加您需要重置的样式。

最好使用更通用的标记，例如<div>或flexbox。

在这里说的是我尝试使用.keys > span { display: inline-block; color: #5E5E5E; font: bold 10px arial; text-decoration: none; margin: 3px 2px; padding: 7.5px 10px; background: #EFF0F2; border-radius: 4px; border-top: 1px solid #F5F5F5; box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333; text-shadow: 0px 1px 0px #F5F5F5; text-align: center; clear: both; } .keyboard { display: flex; flex-wrap: wrap; align-items: center; } .keys { display: flex; flex-wrap: wrap; justify-content: center; flex: 0 1 100%; padding: .5rem; } .keys > span:first-child { flex: 0 0 0; margin-left: 50%; margin-right: 50%; white-space: nowrap; } #green { background-color: rgba(0,255,0,.35);} #red { background-color: rgba(255,0,0,.35);} #blue { background-color: rgba(0,0,255,.35);}：

<div class="keyboard">
  <div id="green" class="keys">
    <span>Z</span>
    <span>Q</span>
    <span>S</span>
    <span>D</span>
  </div>
  <div id="blue" class="keys">
    <span>Flèche haut</span>           
    <span>Flèche gauche</span>
    <span>Flèche bas</span>
    <span>Flèche droite</span>
  </div>
  <div id="red" class="keys">
    <span>O</span>
    <span>K</span>
    <span>L</span>
    <span>M</span>
  </div>
</div>

class

较大的键似乎未对齐，但这是因为第2和第4不相等。第一个实际上是居中的你会注意到我也简化了你的标记。当父级的所有项目都有.parent-class > child {}时，将该类应用于其父级并使用

设置它们的样式是有意义的。

$products

如果您需要有关布局本身的更多帮助，请随意分享jsFiddle链接，如果您在定位元素时遇到任何问题，我将会看看。

不要忘记autoprefix。

位置像键盘上的键一样

1 个答案: