Verwendung von Divs zur Anzeige tabellenähnlicher Daten

Question

Ich möchte Daten wie die folgenden anzeigen:

 Title     Subject    Summary    Date

Also mein HTML sieht so aus:

<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>

Das Problem ist, dass der gesamte Text nicht in einer einzigen Zeile erscheint. Ich habe versucht, hinzuzufügen display="block" aber das scheint nicht zu funktionieren.

Was mache ich hier falsch?

Das ist wichtig: In diesem Fall möchte ich nicht mit einem table Element, sondern bleiben bei div Tags.

Answer 1

Tut mir leid, aber ich muss Ihnen sagen, dass Sie Tabellen verwenden sollen. Denn dies sind tabellarische Daten.

Vielleicht können Sie uns sagen, warum Sie no Sie wollen Tabellen verwenden?

Ich habe den Eindruck, und ich bin mir sicher, auch viele andere, dass Sie mit der Idee, keine Tabellen zu verwenden, nicht einverstanden sind. Es heißt nicht "keine Tabellen verwenden", sondern "keine Tabellen für das Seitenlayout verwenden".

Was Sie hier tun, ist das Anlegen von Tabellendaten, also sollten sie natürlich in einer Tabelle stehen.

Falls Sie sich über den Begriff "tabellarische Daten" nicht im Klaren sind, definiere ich ihn wie folgt: Daten, deren Bedeutung nicht aus den Daten allein hervorgeht, sondern erst durch einen Blick in die Kopfzeile ermittelt werden muss.

Angenommen, Sie haben einen Zug- oder Busfahrplan. Er besteht aus einem großen Block von Zeiten. Was bedeutet eine bestimmte Zeit? Das kann man nicht an der Uhrzeit selbst ablesen, aber an den Zeilen- oder Spaltenüberschriften können Sie erkennen, dass es sich um die Abfahrtszeit an einem bestimmten Bahnhof handelt.

Sie haben eine Reihe von Textstrings. Sind das der Titel, die Zusammenfassung oder das Datum? Die Leute werden das anhand der Spaltenüberschriften erkennen. Es ist also eine Tabelle.

Answer 2

Oder auch das hier, das im wahrsten Sinne des Wortes Tabellen für tabellarische Daten verwendet: https://stackoverflow.com/badges

Answer 3

Zur Veranschaulichung der Bemerkungen in den vorangegangenen Antworten, die Sie auffordern, table statt div für tabellarisch Daten:

CSS-Tabellengalerie ist eine großartige Möglichkeit, schöne Tabellen in vielen verschiedenen visuellen Stilen darzustellen.

Answer 4

Im Zeitalter der CSS-Frameworks sehe ich wirklich keinen Grund, vom Table-Tag völlig abzurücken. Zwar ist es jetzt möglich, die display: table-* für jedes beliebige Element verwenden, aber table ist immer noch das bevorzugte Tag, um Daten in Tabellenform zu formatieren (nicht zu vergessen, dass es semantisch korrekter ist). Wählen Sie einfach eines der beliebten CSS-Frameworks, um tabellarische Daten schön aussehen zu lassen, anstatt die Darstellung von <div> Tags, um etwas zu erreichen, wofür es nicht gedacht ist.

---

display: block

wird sicherlich nicht funktionieren, versuchen Sie

display: inline

oder alles nach links verschieben und entsprechend positionieren

aber wenn Sie tabellarische Daten haben, dann ist es am besten, die Markierung in <table> Tag

eine Referenz: von sitepoint

Answer 5

Die CSS-Eigenschaft float ist das, was Sie suchen, wenn Sie divs horizontal stapeln wollen.

Hier ist ein gutes Tutorial über Schwimmer: http://css.maxdesign.com.au/floatutorial/