テーブルまたはcolspanを使用しない列の整列

私は、アプリケーション（Silverlightから移植されています）でフォームをレイアウトするソリューションを探しています。私たちはラベルを貼るのが好きで、テーブルなしでこれをしようとしていますが、テーブルが解決する根本的な問題があります。私は他の方法に対処する方法がわかりません。ここでテーブルまたはcolspanを使用しない列の整列

は、例えば、（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>

私たちは、 "入力ラベル" の2つのグループを持っています。 左端の列は、どちらのグループでも最も幅の広いラベルの幅に合わせて調整され、同時に各行も最も高い要素の高さに調整されます。

テーブルなしで同じ動作を達成するにはどうすればよいですか？人々が「テーブルレス」レイアウトについて話しているのは、そのレイアウトのコンテンツサイズを気にしないものだけですか？

出典

2016-08-22 Mud

レイアウト – geo

@geoを作成するために使用 'div'に次に、どのように私はすべての列にわたって最も広いラベルの幅を調整するための最初の列を得るのですか？ – Mud

コードは外部のコードホスティングサービスではなく、問題になっていなければなりません。 – meagar

編集：

ああ、申し訳ありません。あなたは実際には1行に2つ以上の要素を書くことができますが、通常はfloat：rightのように、逆順に並べる必要があります。

あなたがテーブルを使用してはならない場合は、次の行ごとにdiv要素を追加し、お互いに積み重ねからそれらを保つために、それらの間に目に見えない水平ルールを置きます。また、浮動小数点数：ラベルと浮動小数点に左：入力ボックスに右。 ~~それは動作しますが、次のような3つ以上の要素を含む行を作る方法はわかりません：生まれた日：月/日/年、仕事。~~

とにかく、ここでそれを行う方法があります。

<!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>

出典

2016-08-22 04:45:40

テーブルまたはcolspanを使用しない列の整列

答えて

関連する問題