css - 所有按钮问题

Question

我有 5 个按钮，我需要它们按特定顺序排列:
按钮 1
按钮 2 按钮 3
按钮 4 按钮 5

在宽度方面，我希望按钮 1 占宽度的 90% 并位于中间(5% 空白，90% 按钮，5% 空白) 其余按钮为 40%，其中 2&3 和 4&5 之间为 10%(也在中间，两侧有 %5 空白)

在高度方面我希望按钮 1 占据 25%(在它上面我想要 25% 的净空间) 其余按钮各占 15% 每行之间 5%(最后一行和屏幕末尾之间 10%) 所以它像: (25% 空，25% 按钮 1，5% 空，15% 按钮 2 和 3，5% 空，15% 按钮 4 和 5，10% 空)

我在路上迷路了 wayyyyy wayyy 任何帮助将不胜感激!

这就是我到目前为止得到的:here
这是我想要实现的示例 http://s2.postimg.org/p57abzzq1/btns.jpg
谢谢!

Answer 1

我对您所有的特定尺寸要求有点困惑，但就按您需要的顺序获得按钮而言，这可能会有所帮助:

Demo Fiddle

我修改了你的 html，因为你没有关闭 </button>标签，并有错误 </a>标签。我还添加了一个包装元素，并将其变成蓝色，这样您就可以看到发生了什么。

编辑 - 这是更新后的代码，使样式更接近您正在寻找的内容。现在将按钮设置为 %，无论您设置 button-wrapper 的大小如何，它们都应保持该布局。到。

HTML:

<div class="button-wrapper">
    <button class="btn1">button 1</button>
    <button class="btn23">button 2</button>
    <button class="btn23">button 3</button>
    <button class="btn45">button 4</button>
    <button class="btn45">button 5</button>
</div>

CSS:

.button-wrapper {
    width: 300px;
    background: lightblue;
}
.button-wrapper button:first-child {
    width: 100%;
    height: 300px;
    margin: 0px;
}
button {
    width: 49%;
    height: 50px;
    margin: 5px 0px;
}