CSS放置表格和塊

Question

你好！ 我設計了一個預算計算器，並在Drupal 7中實現了它。您可以在此處查看結果：

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

我敢肯定它有很多錯誤。 但是我要修復的一個與塊的位置有關。 您可能會看到，如果在optgroup中單擊“ 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: 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;
}

這將為您提供相同的布局，而無需絕對定位。

試試看，讓我知道是否有幫助！