Ok, ich hatte vor ein oder zwei Wochen ein einfaches Layoutproblem. Abschnitte einer Seite benötigten nämlich eine Überschrift:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Ziemlich einfaches Zeug. Der Hass auf Tabellen scheint in der Web-Welt Einzug gehalten zu haben, woran ich erinnert wurde, als ich fragte, warum anstelle von Tabellen Tags für Definitionslisten (DL, DD, DT) für HTML-Formulare verwendet werden sollen. Nun wurde das allgemeine Thema Tabellen gegen Divs / CSS bereits erörtert, zum Beispiel:
- DIV gegen Tabelle ; und
- Tabellen statt DIVs .
Dies ist also keine allgemeine Diskussion über CSS im Vergleich zu Tabellen für das Layout. Dies ist einfach die Lösung für ein Problem. Ich habe verschiedene Lösungen für das oben Gesagte mit CSS ausprobiert, darunter:
- Schweben Sie nach rechts für die Schaltfläche oder ein Div, das die Schaltfläche enthält.
- Position relativ für die Schaltfläche; und
- Position relativ + absolut.
Keine dieser Lösungen war aus verschiedenen Gründen zufriedenstellend. Zum Beispiel führte die relative Positionierung zu einem Z-Index-Problem, bei dem mein Dropdown-Menü unter dem Inhalt angezeigt wurde.
Also ging ich zurück zu:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>Und es funktioniert perfekt. Es ist einfach, so abwärtskompatibel wie es nur geht (das wird wahrscheinlich sogar unter IE5 funktionieren) und es funktioniert einfach. Kein Herumspielen mit Positionieren oder Schweben.
Kann jemand das Äquivalent ohne Tabellen tun?
Die Anforderungen sind:
- Abwärtskompatibel: zu FF2 und IE6;
- Ziemlich konsistent: über verschiedene Browser hinweg;
- Vertikal zentriert: Die Schaltfläche und der Titel sind unterschiedlich hoch. und
- Flexibel: Ermöglichen eine einigermaßen präzise Kontrolle über Positionierung (Polsterung und / oder Rand) und Styling.
Nebenbei bemerkt bin ich heute auf einige interessante Artikel gestoßen:
- Warum CSS nicht für das Layout verwendet werden sollte ; und
- Tabellen gegen CSS: CSS-Trolle beginnen
EDIT: Lassen Sie mich auf das Float-Problem näher eingehen. Diese Art von Arbeiten:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>Vielen Dank an Ant P für den overflow: hiddenTeil (verstehe immer noch nicht warum). Hier kommt das Problem ins Spiel. Angenommen, Titel und Schaltfläche sollen vertikal zentriert sein. Dies ist problematisch, da die Elemente unterschiedlich hoch sind. Vergleichen Sie dies mit:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>das funktioniert perfekt.
Antworten:
Es ist nichts Falsches daran, die Tools zu verwenden, die Ihnen zur Verfügung stehen, um die Arbeit schnell und korrekt zu erledigen.
In diesem Fall funktionierte ein Tisch perfekt.
Ich persönlich hätte dafür einen Tisch benutzt.
Ich denke, verschachtelte Tabellen sollten vermieden werden, Dinge können chaotisch werden.
quelle
Schweben Sie einfach nach links und rechts und stellen Sie beide ein, und Sie sind fertig. Keine Notwendigkeit für Tabellen.
Edit: Ich weiß, dass ich dafür viele positive Stimmen bekommen habe und ich glaubte, dass ich Recht hatte. Es gibt jedoch Fälle, in denen Sie lediglich Tabellen benötigen. Sie können versuchen, alles mit CSS zu tun, und es wird in modernen Browsern funktionieren, aber wenn Sie ältere unterstützen möchten ... Um mich nicht zu wiederholen, hier der zugehörige Stapelüberlauf-Thread und Rant in meinem Blog .
Edit2: Da ältere Browser nicht mehr so interessant sind, verwende ich Twitter Bootstrap für neue Projekte. Es eignet sich hervorragend für die meisten Layoutanforderungen und verwendet CSS.
quelle
Dies ist eine Art Trickfrage: Es sieht furchtbar einfach aus, bis Sie dazu kommen
Ich möchte für die Aufzeichnung festhalten, dass die vertikale Zentrierung in CSS schwierig ist. Wenn Leute posten und es auf SO endlos erscheint, "kannst du X in CSS machen", lautet die Antwort fast immer "Ja" und ihr Schimpfen scheint ungerechtfertigt. In diesem Fall ist diese eine Sache schwierig.
Jemand sollte einfach die gesamte Frage bis auf "Ist die vertikale Zentrierung in CSS problematisch?" Bearbeiten.
quelle
Float-Titel links, Float-Button rechts und (hier ist der Teil, den ich bis vor kurzem nicht kannte) - machen Sie den Container aus beiden
{overflow:hidden}.Das sollte das Z-Index-Problem sowieso vermeiden. Wenn es nicht funktioniert und Sie die IE5-Unterstützung wirklich benötigen, verwenden Sie die Tabelle.
quelle
overflow:hidden.In reinem CSS wird eine funktionierende Antwort eines Tages darin bestehen, nur zu verwenden
"display:table-cell". Leider funktioniert das in aktuellen Browsern der Klasse A nicht. Sie können also genauso gut eine Tabelle verwenden, wenn Sie trotzdem nur das gleiche Ergebnis erzielen möchten. Zumindest werden Sie sicher sein, dass es weit genug in der Vergangenheit funktioniert.Ehrlich gesagt, benutzen Sie einfach einen Tisch, wenn es einfacher ist. Es wird nicht weh tun.
Wenn Ihnen die Semantik und Zugänglichkeit des Tabellenelements wirklich wichtig ist, gibt es einen Arbeitsentwurf, mit dem Sie Ihre Tabelle nicht semantisch machen können:
http://www.w3.org/TR/wai-aria/#presentation
Ich denke, dies erfordert eine spezielle DTD über XHTML 1.1 hinaus, die nur die gesamte Debatte
text/htmlgegen die Aufregung anregen würde.application/xmlGehen wir also nicht dorthin.Also weiter zu Ihrem ungelösten CSS-Problem ...
Um zwei Elemente vertikal in ihrer Mitte auszurichten: Dies kann auf verschiedene Arten geschehen, mit etwas stumpfem CSS-Hackery.
Wenn Sie die folgenden Einschränkungen erfüllen können, gibt es einen relativ einfachen Weg:
Dann können Sie die absolute Positionierung mit negativen Rändern verwenden:
Dies ist jedoch in den meisten Situationen sinnlos. Wenn Sie die Höhe der Elemente bereits kennen, können Sie einfach Floats verwenden und genügend Rand hinzufügen, um sie nach Bedarf zu positionieren.
Hier ist eine andere Methode, die die Textgrundlinie verwendet, um die beiden Spalten als Inline-Blöcke vertikal auszurichten. Der Nachteil hierbei ist, dass Sie feste Breiten für die Spalten festlegen müssen, um die Breite vom linken Rand auszufüllen. Da wir die Elemente an eine Textgrundlinie gebunden halten müssen, können wir nicht einfach float: right für die zweite Spalte verwenden. (Stattdessen müssen wir die erste Spalte breit genug machen, um sie zu verschieben.)
Der HTML- Code : Wir fügen jeder Spalte .valign-Wrapper hinzu. (Geben Sie ihnen einen "semantischeren" Namen, wenn Sie dadurch glücklicher werden.) Diese müssen ohne Leerzeichen dazwischen aufbewahrt werden, da sie sonst durch Textbereiche auseinandergedrückt werden. (Ich weiß, dass es scheiße ist, aber das ist es, was man bekommt, wenn man mit dem Markup "rein" ist und es von der Präsentationsschicht trennt ... Ha!)
Das CSS: Wir verwenden
vertical-align:middle, um die Blöcke an der Textgrundlinie des Gruppenkopfelementes auszurichten. Die unterschiedlichen Höhen jedes Blocks bleiben vertikal zentriert und drücken die Höhe ihres Behälters heraus. Die Breiten der Elemente müssen entsprechend der Breite berechnet werden. Hier sind sie 400 und 100, abzüglich ihrer horizontalen Polsterung.Der IE behebt: Internet Explorer zeigt nur Inline-Block für nativ-Inline-Elemente an (z. B. span, nicht div). Wenn wir dem div hasLayout geben und es dann inline anzeigen, verhält es sich wie ein Inline-Block. Die Randanpassung dient dazu, eine Lücke von 1 Pixel oben zu beheben (versuchen Sie, dem Gruppentitel Hintergrundfarben hinzuzufügen, um sie anzuzeigen).
quelle
Ich würde empfehlen, in diesem Fall keine Tabelle zu verwenden, da dies keine tabellarischen Daten sind. Es ist rein präsentativ, wenn sich der Knopf ganz rechts befindet. Dies würde ich tun, um Ihre Tabellenstruktur zu duplizieren (wechseln Sie zu einem anderen H #, je nachdem, wo Sie sich in der Hierarchie Ihrer Site befinden):
Wenn Sie eine echte vertikale Ausrichtung in der Mitte wünschen (dh wenn der Text umbrochen wird, ist die Schaltfläche in Bezug auf beide Textzeilen immer noch mittig ausgerichtet), müssen Sie entweder eine Tabelle erstellen oder etwas mit
position: absoluteund Rändern bearbeiten . Sie könnenposition: relativeIhrem Dropdown-Menü (oder wahrscheinlich dem übergeordneten Menü) hinzufügen , um es in die gleiche Reihenfolge wie die Schaltflächen zu bringen, sodass Sie es mit dem Z-Index darüber streichen können, wenn es dazu kommt.Beachten Sie, dass Sie
width: 100%das div nicht benötigen, da es sich um ein Element auf Blockebene handelt undzoom: 1das div sich so verhält, als hätte es einen Clearfix im IE (andere Browser übernehmen den eigentlichen Clearfix). Sie benötigen auch nicht alle diese Fremdklassen, wenn Sie etwas spezifischer auf Dinge abzielen, obwohl Sie möglicherweise ein Wrapper-Div oder eine Spanne auf der Schaltfläche benötigen, um die Positionierung zu vereinfachen.quelle
zoom: 1in.group-header, das hasLayout auslöst und bewirkt, dass sich IE 6 genauso verhält, als ob das Element: after aktiv wäre.Machen Sie einen Double Float in einem Div und verwenden Sie den Clearfix. http://www.webtoolkit.info/css-clearfix.html Haben Sie Einschränkungen hinsichtlich Polsterung / Rand?
quelle
quelle
Ich habe mich für Flexbox entschieden, weil es die Dinge so viel einfacher gemacht hat.
Grundsätzlich müssen Sie zu den Eltern der Kinder gehen, die Sie ausrichten und hinzufügen möchten
display:box(natürlich mit Präfix). Verwenden Sie den Rechtfertigungsinhalt, damit sie in den Seiten sitzen . Der Abstand dazwischen ist das Richtige, wenn Sie Elemente haben, die wie in diesem Fall am Ende ausgerichtet werden müssen (siehe Link) ...Dann das Problem der vertikalen Ausrichtung. Da ich das übergeordnete Element der beiden Elemente erstellt habe, möchten Sie eine Flexbox ausrichten. Es ist jetzt einfach zu bedienen
align-items: center.Dann habe ich die gewünschten Stile hinzugefügt, den Float aus dem Titel und der Schaltfläche in der Kopfzeile entfernt und eine Auffüllung hinzugefügt:
Siehe Demo
quelle
Ich bin damit einverstanden, dass man wirklich nur Tabellen für tabellarische Daten verwenden sollte, aus dem einfachen Grund, dass Tabellen erst angezeigt werden, wenn sie vollständig geladen sind (egal wie schnell das ist; es ist langsamer als die CSS-Methode). Ich bin jedoch der Meinung, dass dies die einfachste und eleganteste Lösung ist:
Die Tastenfunktion und jedes zusätzliche Detail können aus dieser Grundform heraus gestaltet werden. Entschuldigung für die schlechten Tags.
quelle