1

我正在尝试创建一个 HTML“数字键盘”，就像在某些键盘上找到的那样。我对如何在不使用表格的情况下进行布局感到困惑。

在此处输入图像描述

我正在使用 Bootstrap (v3.1.1)，所以我的第一反应是尝试使用它的col-类来重现键盘上的 4 列键。虽然这很尴尬，但我无法轻松地让按钮的大小在不同级别的嵌套div容器之间保持一致。我很快就失败了。

我知道我可以使用基于布局的 s 和s<table>轻松完成此任务。但是为此使用表格布局感觉不合适，因为它显然不是表格数据。colspanrowspan

display我试图通过使用 CSS属性的table*值来获得表格的好处。这比我第一次尝试更干净，而且我使用的类比我之前尝试使用的 Bootstrap 更有意义。不幸的是，我了解到display:table不支持 colspan/rowspan。这是该尝试的 JSFiddle。我试图通过使用rowspan在tall-keys上伪造 a ，height: 144px;但这只会增加整行的高度。

我放弃并最终用<table>. 这是JSFiddle。

有没有办法在不使用 HTML 的情况下创建数字键盘<table>？

注意：键的高度可以是静态值（例如70px），但宽度不能。整个keypad容器的宽度是可变百分比的，因为是响应式的。

Eclipse/RSA 中的哪个内置 JAR 文件用于创建 Junit 测试套件？

我无法在 Eclipse/RSA 中找到用于创建 Junit 测试套件的内置 JAR 文件：File-> New -> Junit Test Suite

我们使用的是 RSA 8.0.2 版本，并且使用此 RSA，目前测试套件默认以 JUnit3 格式创建。我必须修改这个现有的功能（创建 Junit3 TestSuite）来创建带有注释的 Junit4 测试套件。

请问有人可以帮我解决这个问题吗？

4

1 回答 1

11

通过使用浮动行为，您可以使用一堆内联块来创建它。每个块都向右浮动（因为大的垂直元素在右侧）。

因此，小键盘上的按钮从右上角向左放置在 HTML 中。例如，第一个块是-按钮，然后是*, /, Num-Lock, +, 等等。

为了制作一个双倍大小的垂直按钮，我附加了属性v2（你可以为此使用类，但我觉得自己与众不同），为了制作一个双倍大小的水平按钮，我附加了属性 h2。

对于响应式布局，向下滚动到编辑。

CSS：

container {
    width: 442px;
    border: 1px solid black;
    display: inline-block;
}

block {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    background: red;
    float: right;
}

block[v2] {
    height: 210px;
}

block[h2] {
    width: 210px;
}

HTML：

<container>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block h2=""></block>
</container>

JSFiddle

编辑：

如果它必须响应，您可以使用 calc 和百分比来使宽度适合：

block
{
    width: calc(25% - 10px);
    margin: 5px;
}

block[h2]
{
    width: calc(50% - 10px);
}

JSFiddle

于 2014-04-15T07:59:21.417 回答