Zweispaltige Seite mit Feldgruppen

Ich weiß nicht, wo ich mit dem Lernen eines solchen Layouts ohne Tabellen oder höchstens einer zweispaltigen Tabelle als einfacher Container anfangen soll. Wo soll ich anfangen?Zweispaltige Seite mit Feldgruppen

Quelle

2009-05-30 ProfK

So nach dem Kommentar über Sie suchen ein Layout mit zwei Spalten von Feldgruppen zu sehen, ging ich und schrieb, ohne die Verwendung von Tabellen dieses oben:

<html> 
<head> 
<title>Two Column Fieldsets</title> 

<style> 
html, body 
{ 
    background: #156; 
    text-align: center; 
} 

#container 
{ 
    background: #FFF; 
    border: 1px #222 solid; 
    height: 600px; 
    margin: 0 auto; 
    text-align: left; 
    width: 700px; 
} 

#container form 
{ 
    margin: 0 auto; 
} 

label 
{ 
    float: left; 
    width: 50px; 
} 

.singleRow 
{ 
    float: left; 
    width: 322px; 
} 

</style> 

</head> 
<body> 
<div id="container"> 
    <form action=""> 
    <fieldset class="singleRow"> 
     <label for="1">Text:</label> 
     <input id="1" type="text" /> 
     <input type="submit" value="submit" /> 
    </fieldset> 
    <fieldset class="singleRow"> 
     <label for="2">Text:</label> 
     <input id="2" type="text" /> 
     <input type="submit" value="submit" /> 
    </fieldset> 
    </form> 
</div> 
</body> 
</html>

Die meisten der Stile sind es gerade zu machen Line-up schön und zentriert und etwas Kontrast bieten. Um zwei Spalten zu erhalten, müssen beide Feldgruppen nach links verschoben werden. Jedes Feldset hat eine Klasse namens .singleRow, deren einzige wichtige Stil ist float: left; (die Breite ist da, um sie schön zu machen Linie). Durch das Floaten beider Elemente (in diesem Fall Feldgruppen, aber sie könnten div s li s, jedes Element) sein, und sicherstellen, dass ihre kombinierten Breiten kleiner als die Breite ihres Containers sind, können Sie ein schönes zweispaltiges Layout erreichen .

Hoffe, das hilft.

Quelle

2009-05-30 23:54:50

Vielen Dank für eine höchst gelehrte Antwort @Hooray! Ich werde es etwas später testen. – ProfK

Zweispaltige Seite mit Feldgruppen

Antwort

Verwandte Themen