Wie viele DIVs in CSS positionieren

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe durch ein langes Tutorial auf W3Schooles gegangen CSS zu lernen; Ich lernte einige Grundlagen, aber immer noch vermisse mein primäres Ziel: Positionierung DIVs

Das ist, was ich versuche zu tun, 

*---------*---------*
*         *         *
*         *         *
*---------*---------*

Mein Ziel ist einfach und trivial für einige, aber ich habe Kopfschmerzen dies den richtigen Weg in der Tat ich es tue, aber es hat viele Probleme, wenn ich mehr Text zu den DIVs hinzufügen oder sie fusionieren einfach mit einem anderen DIVs

Was ich tat einfach mit margin und padding Werte spielen Firebug. Alles, was ich jetzt brauchen, ist mir das einfach zu erlernen Trick (hoffe ich), was mir fehlt: wie diese einfache Positionierung funktioniert? Soll ich absolute, relative Positionierung verwenden? Ändern Sie den Rand, die Polsterung, die Größe ??

Wenn Sie ein gutes Tutorial erklärt diesen Punkt haben, so wenden Sie sich bitte darauf zeigen. Ich hatte andere Kopfschmerzen für die auf Google suchen.

War es hilfreich?

Lösung

Es sieht aus wie Sie versuchen, zwei Spalten zu schweben nebeneinander. Das ist ziemlich einfach und in der Tiefe bedeckt hier:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout / 2-col /

Ich neige dazu, zu bleiben weg von der Position Eigenschaft, es sei denn ich habe einige Elemente zu überlagern.

Andere Tipps

Erstellen eines 2-Spalten-Layout in CSS

Ich persönlich mag es nicht klar: ein. Sowohl auf einem br-Tag

Mit overflow: auto auf dem übergeordneten div statt 

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Mit der absoluten Positionierung können Sie absolut alle Ihre div Platz. Der Nachteil ist, dass sie in diesen Positionen, egal die Auflösung oder die Größe des Fensters Anzeige Ihre Seite geklebt werden.

Was Sie tun können, ist die linke Spalte links schweben, und geben Sie dann nicht auf der rechten Spalte schweben. Behalten Sie die Standardpositionierung durch nicht spezifiziert absolute noch relative, dann passen nur die Breite der Elemente nach Bedarf.

Wenn Sie mit der Einstellung bestimmte Breiten auf divs in Ordnung sind, hat die folgende funktioniert gut für mich: 

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

Die "float: left" die Spalten macht Side-by-Side-Line-Up. Die letzte div (mit clear: both) macht es so, dass alles, was Sie die Spalten setzen nach unten den Spalten bleibt. Auf diese Weise können Sie die Breite der beiden Spalte ändern, ohne mit dem Styling des anderen durcheinander. 

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>
Nicht verbunden mit StackOverflow
scroll top