Ausrichten von Spalten ohne Tabellen oder Colspan

Ich versuche, eine Lösung zum Auslegen von Formularen in unserer App (portiert von Silverlight) zu finden. Wir mögen Labels, die auftauchen, versuchen, dies ohne Tabellen zu tun, aber es gibt ein grundlegendes Problem, dass Tabellen lösen, ich bin mir nicht sicher, wie ich anders angehen soll. HierAusrichten von Spalten ohne Tabellen oder Colspan

ist ein Beispiel (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>

Wir haben zwei Gruppen von "Label: Eingang" Listen, die jeweils mit ihren eigenen Überschriften. Die Spalte ganz links passt sich an die Breite des breitesten Labels in jeder Gruppe an, und gleichzeitig passt sich jede Zeile auch an die Höhe des höchsten Elements an.

Wie erreiche ich das gleiche Verhalten ohne Tabellen? Wenn Leute über das "tabellenlose" Layout sprechen, ist das nur für Dinge, die sich nicht um die Inhaltsgröße ihres Layouts kümmern?

Quelle

2016-08-22 Mud

Verwendung 'div' für die Erstellung des Layouts – geo

@geo Dann, wie bekomme ich die erste Spalte auf die Breite des breitesten Label über alle Spalten anpassen? – Mud

Code muss in der Frage gehen, nicht auf einem externen Code-Hosting-Service. – meagar

EDIT:

äh, sorry. Sie können tatsächlich mehr als zwei Elemente pro Zeile machen, aber (wie bei Float üblich: rechts) müssen Sie sie in umgekehrter Reihenfolge setzen.

Wenn Sie nicht eine Tabelle verwenden müssen: Fügen Sie ein div für jede Reihe und legte eine unsichtbare horizontale Linie zwischen ihnen, damit sie nicht übereinander stapeln. Außerdem: ein Float: links zu den Labels und ein Float: rechts zu den Eingabefeldern. ~~Es funktioniert, aber ich würde nicht wissen, wie man eine Linie mit drei oder mehr Elementen macht, wie: Geboren am: Monat/Tag/Jahr, Arbeit.~~

Wie auch immer, hier ist, wie Sie es tun können.

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

Quelle

2016-08-22 04:45:40

Ausrichten von Spalten ohne Tabellen oder Colspan

Antwort

Verwandte Themen