Wie kann ich CSS-Rahmen verwenden, um meine Abschnitte visuell zu gruppieren?

Question

Ich versuche CSS-Rahmen zu verwenden, um meine Abschnitte visuell zu gruppieren, aber der Rahmen, der für meinen zweiten Abschnitt gezeichnet wird, umfasst den ersten, also sieht es schrecklich aus. Wie kann ich die Grenzen richtig machen?

Mein Code:

Mein erstes div bleibt Schwimmer und seine Grenze zeigt richtig, umfasst nur den Bereich es braucht. Es hat meist Eingabeelemente auf der linken Seite der Seite.

<div style="float: left; margin-right: 40px; border-width: medium; 
border-color: Black; border-style: solid"> 

Mein zweiter div ist auch meist Textfelder und Etiketten, und es hat diese div Erklärung:

<div style="border-width: medium; border-color: Black; 
border-style:solid"> 

Leider muss ich etwas über das CSS-Box-Modell fehlt, da diese Grenze geht den ganzen Weg nach links und umfasst das andere Div. Ich versuche nur zwei Boxen zu haben, die jedes div umfassen, so dass es eine visuelle Trennung und Gruppierung gibt. Wenn ich etwas anderes als Grenzen verwenden muss, ist das auch in Ordnung.

Answer 1

Fügen Sie den Float hinzu: links neben dem zweiten DIV - sie erscheinen immer noch Seite an Seite, wenn genügend Breite vorhanden ist, aber der Platz für den ersten wird nicht "innerhalb" des zweiten bleiben, was ist was du im Moment siehst.

Answer 2

Zuerst setzen Sie eine Breite auf Ihre div s, damit sie nicht mehr über die ganze Seite gehen. (Versuchen width: 50% für einen Start)

Dann margin (oder margin-left/top/bottom/right) zuweisen Margen Ihre div s je nach Bedarf. So kollabieren die Grenzen nicht mehr.

Answer 3

Sie können dies erreichen, indem Sie einfach "fieldset" -Tag verwenden. Auf diese Weise können Sie die Überschrift für verschiedene Gruppen verwenden, indem Sie das Tag "Legende" verwenden.