My divs stapeln oben auf einander, wenn ich versuchen, Elemente zu schweben

ich ein Super-noobie bei CSS bin, und ich habe ein paar Kisten gemacht für auf einer Seite Positionierung Artikel zu üben. Leider bin ich schon auf ein Problem gestoßen! Ich möchte die Kästchen 1 und 2 in einer Zeile nebeneinander und die Kästchen 3 und 4 in der nächsten Zeile platzieren. Ich habe versucht, float: left zu verwenden, um Box 2 zu Box 1 zu machen, aber Dinge sind nur überlappend.My divs stapeln oben auf einander, wenn ich versuchen, Elemente zu schweben

** Würde Bilder posten, wenn ich könnte.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="boxprac.css"> 
    <title>Box Practice</title> 
    </head> 
    <body> 
    <div id="box1"> 
     <h1>Box One</h1> 
    </div> 
    <div id="box2"> 
     <h1>Box Two</h1> 
    </div> 
    <div id="box3"> 
     <h1>Box Three</h1> 
    </div> 
    <div id="box4"> 
     <h1>Box Four</h1> 
    </div> 
    </body> 
</html>

STYLE

* { 
    padding: 0; 
    margin: 0; 
} 

#box1 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
    clear: left; 
} 

#box2 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
    float: left; 
} 

#box3 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
} 

#box4 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
}

I verwalten 2 Boxen aufreihen, 3 und 4 in der zweiten Zeile mit dem Schwimmer links Eigenschaft; Wenn es jedoch nicht auf allen drei Feldern ist, dann stapeln sie sich übereinander.

Quelle

2017-03-05 cinnstix

Put float: left auf allen vier Boxen, und fügen Sie clear: left zum dritten:

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#box1 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    float: left; 
 
} 
 

 
#box2 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    float: left; 
 
} 
 

 
#box3 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    clear: left; 
 
    float: left; 
 
} 
 

 
#box4 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    float: left; 
 
}

<div id="box1"> 
 
     <h1>Box One</h1> 
 
    </div> 
 
    <div id="box2"> 
 
     <h1>Box Two</h1> 
 
    </div> 
 
    <div id="box3"> 
 
     <h1>Box Three</h1> 
 
    </div> 
 
    <div id="box4"> 
 
     <h1>Box Four</h1> 
 
    </div>

Quelle

2017-03-05 01:47:04 Johannes

Okay, habe ich versucht, dass. Box 1 steht jetzt in Box 2; Allerdings befindet sich Box 3 jetzt auf einer eigenen Zeile und der Text von Box 4 befindet sich in der darunter liegenden Zeile und der tatsächliche Rahmen für Box 4 ist etwas über Box 1 gestapelt. http://i.imgur.com/nYSqodD .jpg – cinnstix

dann hast du etwas anderes gemacht, aber ich kann nicht sehen, was du getan hast, damit ich den Fehler nicht sehen kann ... Es hört sich so an, als hättest du irgendwo vergessen, ein HTML-Tag zu schließen, aber ich kann es nicht wirklich sagen ohne es zu sehen. (Ich meine den Code) – Johannes

Eigentlich von Ihrem Bild, ich denke, Sie haben nicht 'float: links'auf der vierten Box (überprüfen Sie auch für Syntaxfehler wie Semikola am Ende jeder Zeile etc.) – Johannes

Dies ist im Grunde die Idee, diese hinter der Lösung. Der beste Weg, um wrap ist jede Gruppe von Boxen in einem div

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.boxes { 
 
    width: auto; 
 
    height: 100px; 
 
    } 
 
#box1 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 1em; 
 
    font-size: 12px; 
 
    line-height: 50px; 
 
    float: left; 
 
} 
 

 
#box2 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
    font-size: 12px; 
 
    margin: 1em; 
 
    line-height: 50px; 
 
    float: left; 
 
} 
 

 
#box3 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
    font-size: 12px; 
 
    margin: 1em; 
 
    line-height: 50px; 
 
    float: left; 
 
} 
 

 
#box4 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    font-size: 12px; 
 
    width: 50px; 
 
    margin: 1em; 
 
    line-height: 50px; 
 
    float:left; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="boxprac.css"> 
 
    <title>Box Practice</title> 
 
    </head> 
 
    <body> 
 
    <div class="boxes"> 
 
    <div id="box1"> 
 
     <p>Box One</p> 
 
    </div> 
 
    <div id="box2"> 
 
     <p>Box Two</p> 
 
    </div> 
 
    </div> 
 
    <div class="boxes"> 
 
    <div id="box3"> 
 
     <p>Box Three</p> 
 
    </div> 
 
    <div id="box4"> 
 
     <p>Box Four</p> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-03-05 01:48:17

My divs stapeln oben auf einander, wenn ich versuchen, Elemente zu schweben

Antwort

Verwandte Themen