Question

我正在尝试找到在我们的应用程序中布局表单的解决方案（从Silverlight移植）。我们喜欢标签，试图在没有表格的情况下这样做，但是表格解决的根本问题我不知道如何解决任何其他问题。

以下是一个示例（plnkr）：

<!DOCTYPE html>
<html>

  <head>
    <style>
      h1 {
          font-size: 1.1rem;
          border-bottom: 1px solid #ccc;
      }

      td {
        vertical-align: top;
        padding-bottom: 0.5rem;
      }
      </style>
  </head>

  <body>
      <table>
          <tr>
              <td colspan='2'><h1>This is a header that should span columns.</h1></td>
          </tr>
          <tr>
              <td>
                label:
                  <div>(This label is extra</div>
                  <div>tall because of these</div>
                  <div> extra lines.)</div>
              </td>
              <td><input placeholder='search for stuff'></td>
          </tr>
          <tr>
              <td>this is the longest label:</td>
              <td><input placeholder='search for stuff'>
                  <div>This content is extra tall.</div>
              </td>
          </tr>
          <tr>
              <td>longer label:</td>
              <td><input placeholder='search for stuff'></td>
          </tr>

          <tr>
              <td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
          </tr>
          <tr>
              <td>long label:</td>
              <td><input placeholder='search for stuff'></td>
          </tr>
          <tr>
              <td>another label:</td>
              <td>
                  <div>This content is extra tall.</div>
                  <div>This content is extra tall.</div>
                  <div>This content is extra tall.</div>
              </td>
          </tr>
          <tr>
              <td>short label:</td>
              <td><input placeholder='search for stuff'></td>
          </tr>
      </table>
  </body>
</html>

我们有两组“标签：输入”列表，每个列表都有自己的标题。 最左边的列调整为任一组中最宽标签的宽度，同时每行也调整为最高元素的高度。

如何在没有表的情况下实现相同的行为？当人们谈论“无表格”布局时，那只是针对那些不关心其布局内容大小的事情吗？

Answer 1

编辑：

对不起，对不起。你实际上每行可以做两个以上的元素，但是（像往常一样浮动：右）你必须按相反的顺序放置它们。

如果你不能使用表格：为每一行添加一个div，并在它们之间放置一条不可见的水平规则，以防止它们相互堆积。另外：一个浮点数：左边是标签，另一个是浮点数：右边是输入框。 ~~它有效，但我不知道如何使用三个或更多元素，例如：生于：月/日/年，工作。~~

无论如何，这是你可以做到的。

has_many :impacts, as: :impactable, inverse_of: :impactable

排列没有桌子或colspan的列

1 个答案: