Question

使用Rails，我有一个页面，它显示两个字符串变量的值并排显示两列。在该变量下面是一些DIV块。渲染时，变量在某些情况下会输出1行文本，而在其他情况下会输出1行以上的文本。

目前，仅当每个变量输出相同数量的文本行时，才会排列变量下方的DIV块。如果每个变量输出不同数量的文本行，则后面的DIV块将不会排列。

以下是代码外观的简化示例：

<div class="row">
    <div class="col-md-6">

        <%= @variable.text %>

        <!-- This div block needs to be aligned with the one in the other column, no matter how much text is outputted above. -->
        <div>
            <p>Content</p>
        </div>

    </div>

    <div class="col-md-6">

        <%= @variable.text %>

        <!-- This div block needs to be aligned with the one in the other column, no matter how much text is outputted above. -->
        <div>
            <p>Content</p>
        </div>

    </div>

</div>

我想知道如何强迫前两个DIV块始终相互排列，无论它们上面显示多少行文本。

Answer 1

将结构拆分为2行：

<div class="row">
    <div class="col-md-6">

        <%= @variable.text %>

    </div>

    <div class="col-md-6">

        <%= @variable.text %>

    </div>

</div>
<div class="row">
    <div class="col-md-6">
        <div>
            <p>Content</p>
        </div>
    </div>
    <div class="col-md-6">
        <div>
            <p>Content</p>
        </div>
    </div>
</div>

Answer 2

这看起来像表格数据，所以我会选择一个表：

<table>
  <tr>
    <td><%= @variable.text %></td>
    <td><%= @variable.text %></td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
  </tr>
</table>

您还可以获得随内容扩展的单元格的好处。

保持DIV块在同一条线上

2 个答案: