Die beste Weg, eine 3-Spalten-Website mit
-Tags zu implementieren? [geschlossen]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

Frage

Ich entwickle ein 3-Spalten-Website ein Layout wie folgt aus: 

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Aber, unter Berücksichtigung des ‚Position‘ Standard-CSS-Eigenschaft <DIV>'s ist ‚statisch‘, mein <DIV>'s untereinander gezeigt wurde, wie erwartet.

Also habe ich die CSS-Eigenschaft ‚Position‘ auf ‚relative‘ gesetzt, und änderte die ‚top‘ Eigenschaft der ‚Mitte‘ und ‚rechts‘ <DIV>'s auf - (minus) die Höhe des vorangegangenen <DIV>. Es funktionierte gut, aber dieser Ansatz brachte mir zwei Probleme:

1) Auch wenn Internet Explorer 7 zeigt drei Spalten richtig, es immer noch die vertikale Bildlaufleiste hält, als ob die <DIV>'s untereinander positioniert waren, und es gibt eine Menge weißen Raum, nachdem der Inhalt vorbei ist. Ich would'n mag, dass haben.

2) Die Höhe dieser Elemente ist variabel, so dass ich nicht wirklich weiß, welcher Wert für jeden <DIV> des ‚top‘ Eigenschaft zu setzen; und ich möchte nicht, es codieren.

Also meine Frage ist, was wäre der beste (einfach + elegant) Weg, um dieses Layout zu implementieren? Ich möchte die absolute Positionierung vermeiden, und ich auch mein Design tableless zu halten.

War es hilfreich?

Lösung

Wenn Sie nicht bereits ausgecheckt Apart Sie sollten, wie es einige ausgezeichnete Tutorials enthält und Richtlinien für Website-Design.

Dieser Artikel insbesondere sollte Ihnen helfen.

Andere Tipps

Blueprint CSS versuchen. Es ist wirklich einfach zu beginnen mit, aber leistungsfähig genug für die meisten Anwendungen.

Einfache Übungen und Beispiele zu verstehen. Hat eine Typographie-Bibliothek, die gerade aus der Box anständige Ergebnisse produziert.

Bei weitem der einfachste Weg, die ich gefunden habe 3 Spalten (oder jede andere Anzahl von Spalten über den verfügbaren Platz in seltsame Wege aufgeteilt) zu tun ist, YUI Grids . Es gibt einen YUI Grids Builder das grundlegende Layout zu geben. Im Folgenden werden Ihnen ein 750px breit einfaches 3-Spalten-Layout mit einer 160px linken Seitenleiste (1/3 1/3 1/3 geteilt). Ändern sie auf andere Breiten, sidebar configs und Spalten Splits ist wirklich einfach. 

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Es gibt eine Reihe von Beispielen und Bibliotheken geben Sie suchen können -. Ein paar bereits aufgeführt (A List Apart ist ein Muss lesen)

Ich habe die Yahoo User Interface Library (YUI) auf meiner letzten paar Seiten verwendet und mag es wirklich. Yahoo unterstützt es vollständig und es ist schnell zu verstehen und zu nutzen. Hier gibt es CSS für Grids , mit dem Sie Ihre Seite in so viele Spalten zu formatieren können und Abschnitte, wie Sie wollen.

YUI ist nett, weil Sie das Rad für die Gründung Ihrer Website nicht neu erfunden, und sie tun alles, um die Arbeit zu machen, dass ihre Grundlagen in allen Browsern funktionieren. Und am besten von allen, es ist kostenlos.

Ich mag 960 Grid System . Es ist ein leichtes, einfach CSS zu verwenden, die den Bildschirm in 12 (oder 16) Spalten devides. Sie können es für ein 3-Spalten-Design verwenden und den Rest Ihrer Inhalte entsprechend auszurichten.

Versuchen Sie, die divs nach links schwebend, dass sie alle auf der gleichen Linie halten -. Vorausgesetzt, es gibt genügend Abstand

Für feste coloumn, gerade eingestellt Höhe: xxxpx wird sie gleich machen.

Mit diesem 3-Spalten-Layout-Generator zu versuchen.

Dieser Code auf meinem Computer mit Internet Explorer 8, Chrome, Firefox. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

Zum einen relativen Positionierung tut, was Sie beschrieben haben. Es Platz in der ursprünglichen Position behält sich aber zeigt die DIV um einen gewissen Betrag versetzt

Wenn Sie die DIVs schweben dann werden sie stapeln von links nach rechts, aber dies kann zu Problemen führen.

Eine Drei-Spalten-Layout mit CSS ist ziemlich hart. Hier finden Sie aktuelle [ http://www.glish.com/css/7.asp]

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top