CSS Ausrichtung: horizontal Blockieren?
https://stackoverflow.com/questions/4184350
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich arbeite an einer CMS-Vorlage und versuchen, herauszufinden, ob dies überhaupt möglich ist. Ich war nicht in der Lage, etwas auf dem Netz zu finden, vielleicht nur ich die falschen Keywords verwendet.
Lassen Sie sich dieses Modell gegeben:
http://img833.imageshack.us/img833/4979/alignmentmockup.jpg
<div> #1 ist eine feste 'Banner' Container links ausgerichtet sind.
<div> #2 ist ein ein weiterer Behälter mit einer festen Breite. Es soll die ganze Seite als Mess zentriert werden mit (Skala # 2), aber nicht überschneidet mit <div> #1 (Skala # 1).
Problem : Wenn die Browser-Fenster zu klein sind (beispielsweise die Größe verändert, mobiler Browser), wobei der Behälter mit dem Überlappungen <div> #1. Je nach ihrer z-Index, einer von ihnen ist oben auf der anderen Seite.
Ansatz 1 : Beiden Behälter auf dem gleichen z-index. <div> #2 hat margin:0 auto;
und , die sie nicht stoppen überlappen.
Ansatz 2 : Beide gestylten position: relative; float: left; z-index: 10
und <div> #2does nicht align auf die Webseiten Zentrum mehr.
Da dies ein resticted Vorlage zurück Ende ist auf Ich arbeite, kann ich nicht zusätzliche Behälter hinzufügen, wie ich will. Ich habe nur Zugriff auf den Teil der HTML-Datei direkt zwischen den <body> und dem Beginn der Webseiten-Funktionen. Also habe ich nur einzelne <div>s (wie <div> #1) hinzufügen können, aber sie mit dem Rest der Website nicht kaskadieren kann (wie <div> #2).
Jede Andeutung für einen anderen Ansatz zu schätzen!
Lösung
Ihr Problem ist, dass CSS nicht min-Marge hat, dass Sie auf div2 mit der Breite von div1 einstellen könnten. Ich erinnere mich an einen Artikel über das Lesen nicht lange her, und eine gute Lösung von Ron Adair gefunden:
http://www.iamron.com/downloads/min-padding.html
Der vollständige Artikel, in dem eine komplexere Lösung präsentiert wird. Ron dann kommentiert seinen einfachen Weg, um das gleiche Ergebnis zu erhalten:
http://buildinternet.com/2009/10/purely- CSS-fälschen-Minimum-Margen
