我正在尝试寻找一种解决方案,以在我们的应用程序中布局表格(从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>


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

没有表如何实现相同的行为?当人们谈论“无桌”布局时,这是否仅适用于不关心布局内容大小的事物?

最佳答案

编辑:

嗯,对不起。实际上,您每行可以执行两个以上的元素,但是(通常与float:正确)必须将它们以相反的顺序放置。



如果不必使用表,请执行以下操作:为每行添加一个div,并在它们之间放置一个不可见的水平线,以防止它们彼此堆积。另外:浮点数:左边的标签和浮点数:右边的输入框。它行得通,但是我不知道如何用三个或更多元素来做一行,例如:生于:月/日/年,工作。

无论如何,这是您的操作方法。

<!DOCTYPE=html>
<html>
   <style>
       * {
          margin: 0;
          padding: 0;
       }
       body {
          float: left;
       }
       hr {
          clear: both;
          border: none;
       }
       p{
          float: left;
       }
       form {
          float: right;
       }
   </style>
   <body>
       <div id = "row_1">
              <p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
              <form><input type="text" placeholder="Second" /></form>
       </div>
       <hr />
       <div id = "row_2">
              <p>short</p>
              <form><input type="text" placeholder="First" /></form>
       </div>
   </body>
</html>

关于html - 排列没有表格或列宽的列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39070139/

10-11 23:29
查看更多