Question

？你好！我设计了一个预算计算器并在Drupal 7中实现了它。你可以在这里看到结果：

http://www.delengua.es/curso-espanol-espana/calculadora-de-precios

我确定它有很多错误。但我要修复的那个与块的位置有关。您可能会看到，如果您单击选项组中名为“Cursos”（或另一个）中的某个选项，您将在表格的右侧（我的意思是包含表单的表格）选择一个方形信息。具体来说，如果您单击“Cursosespecíficos”并在新的optgroup中选择某些内容，您将获得两个信息块。正如你所看到的，如果你检查它们，它们就像这样定位：

display: none; position: absolute; right: 6.5%; top: 12.5%; margin: 15px 15px; width: 220px; height: auto; padding: 10px 10px;

虽然看起来工作正常，但它改变了firefox中的位置，我很害怕它会造成更多麻烦。所以我的问题是......是否可以通过任何其他方式将其与桌子相关联？我的意思是，'y'位置应该与表格相同，而'x'，相同+一些像素数。我认为可以通过两种方式完成：

a）使用JavaScript（我不知道如何，但我想我可以学习谷歌搜索）。

b）只需使用html和css。

由于我更喜欢这个选项，我试图将表和信息标签分组只有一个'<div>'，将标签声明为'inline：block;'，将它们浮动到右边，但是当我做其中一件事时，我无法修改“顶部”位置属性。我从Stackoverflow中的其他线程获得了这些想法，但我不知道我能尝试什么。所以我真的感谢任何帮助。

Answer 1

创建父容器position: relative将使这些元素的position: absolute相对于该父容器。此外，top / bottom / left / right属性仅适用于position：fixed，position：relative和position：absolute。除非定义了其中一个位置，否则浮动元素会忽略它们，在这种情况下会忽略浮点数。

Answer 2

我已经尝试了一些接近你在问题中所说的内容，这对我没有任何问题。

首先，将表单和信息包装在一个div中，如下所示：

<div id="wrap">
    <form id="calculadoracont" method="post" onclick="test()">
        // Your form
    </form>
    <div class="informacion" id="infoespecificos">
        // Your info
    </div>
    <div class="informacion2" id="infoliteratura">
        // Your info
    </div>

    // Your other infos 
</div>

在你的CSS中，只需将它们漂浮到你想要的地方：

form {
    float: left;
}

.informacion, .informacion2 {
    // Remove the position absolute
    float: right;
}

这将为您提供相同的布局而无需绝对定位。

尝试一下，让我知道它是否有帮助！

CSS定位表和块

2 个答案: