Warum wird die horizontale CSS-Ausrichtung für divs innerhalb des div-Containers in meinem WP-Design nicht angezeigt?

WP 3.0.4 Multisite-Netzwerk aktiviert, lokale Installation mit MAMP, PHP 5.3.2, WP THEMA : Twentyten Child (WordPress Theme)

Probleme mit der Anzeige meines CSS-Stylings für die horizontale Ausrichtung von 4 Div-Boxen innerhalb eines Div-Containers.

Hinweis: Das gleiche css-Styling funktioniert gut mit HTML 4.01 Transitional // EN auf meiner handcodierten html / php-Website. Aber auf meiner WordPress-Seite traten die vier Boxen wie eine Treppe von einander herunter.

Gleiches Verhalten in Firefox v3.6.13 und Safari v5.0.3.

Mein CSS:

div .box-container {Anzeige: Inline; Rand: 0.63em 0pt; Auffüllen: 10px; Breite: 640px; Hintergrundfarbe: rgb (229, 231, 225); Position: relativ; schweben: links; Überlauf versteckt; }

div. small-box {Grenze: 1px solid rgb (153, 51, 102); Rand: 10px 5px; Auffüllen: 0.325em; schweben: links; Hintergrundfarbe: rgb (255, 244, 227); Breite: 128px; Zeilenhöhe: 0.85em; maximale Höhe: 8em; min-Höhe: 8em; Position: relativ; }

Mein HTML:

EIN TEXT & BILD

EIN TEXT & BILD

EIN TEXT & BILD

EIN TEXT & BILD

Die div-Breite des Box-Containers wird als 640px angegeben, aber ich bemerke, dass die Auffüllung das Volumen darüber hinaus erweitert.

Auf jeden Fall ist es reichlich groß, um die vier kleinen Boxen, die insgesamt 512px plus ihre insgesamt 40px Marge, plus die 20px Polsterung auf der Box-Container div unterzubringen.

Mein Problem:

Ich verstehe nicht, warum die Polsterung die Größe des Box-Container-Div verschiebt. Als ich versuchte, max-width: 640px zu verwenden, beobachtete ich, dass die Boxen vertikal aufgereiht waren und das Box-Container-Div nicht breiter als 170px war. EDIT: Das Padding wurde seither aus dem Box-Container-Div entfernt und die Ränder wurden auf den Small-Box-Divs angepasst.

ECHTES PROBLEM IST IN DEN ERSTEN 2 PARAGRAPHEN ANGEGEBEN: Die vier kleinen Kästen sind wie Treppen treppenförmig voneinander getrennt. Ich möchte, dass sie horizontal ausgerichtet sind.

Die Small-Box-Divs haben eigentlich alle die gleiche Größe, ihr Inhalt besteht aus Text und Bild.

Hilfe?

Bearbeiten:

Screenshot meiner handcodierten Website, die sich wie erwartet verhält:

Screenshot meiner handcodierten Website, die sich wie erwartet verhält

Staircase-Effekt Ich sehe in WordPress mein WordPress Theme:

Treppenhauseffekt Ich sehe in WordPress mein WordPress Theme

Solutions Collecting From Web of "Warum wird die horizontale CSS-Ausrichtung für divs innerhalb des div-Containers in meinem WP-Design nicht angezeigt?"

Fügen Sie niemals einen Abstand für etwas hinzu, dessen Breite / Höhe Sie korrigieren. Einige Browser fügen das Padding der Breite / Höhe hinzu; andere nicht. Verwenden Sie ein inneres Div, um das Problem zu umgehen:

220x220
200x200

FAND DAS PROBLEM! WordPress hatte ungültiges HTML herausgebracht. Es war also nicht so, dass WordPress das CSS nicht erkennen würde; es war, dass WordPress Absatzelemente Willy Nilly (und ja, ich habe HTML in das HTML-Feld bei der Erstellung der Seite eingeben). Ich entschied mich, das HTML und CSS zu validieren. Das CSS ausgecheckt. Um den HTML-Code für die gesamte Seite zu erhalten, ging ich zu Seitenquelle, wählte alle aus und kopierte sie, fügte sie dann in das direkte Eingabefeld des HTML-Validators ein und markierte das ausführliche Feedback. Der Validator gab Fehler zurück, und tatsächlich hatte WordPress ein Absatz-End-Tag (wo es kein Anfangs-Tag gab) direkt in das Box-Container-Div eingefügt.

Also ging ich zurück in den Seiteneditor, löschte alle Leerzeichen zwischen HTML-Code, ordnete alles auf, speicherte (aktualisierte) und VOILA! ES FUNKTIONIERT! 🙂

Du siehst also, Hakre, es hat immerhin mit WordPress zu tun. Ich habe daraus eine Lektion gelernt: Traue dem WordPress-HTML-Editor nicht.

Danke an alle für Ihre Hilfe.