Split-Balkendiagramm mit CSS

Ich versuche, ein Split-Balkendiagramm mit CSS zu erstellen. Was ich damit meine, ist dies so etwas wie ...Split-Balkendiagramm mit CSS

_____  __________ 
__|____| Text |_________| 
|_______| Text |___|__ 
|______| Text |______|

(Bitte die rohe Zeichnung entschuldigen! Ich hoffe, dass es Sinn macht)

Wie auch immer, ich den Code so weit haben schafft, was ich angebracht habe auf dieser JSFiddle

HTML:

<dl style="width: 600px"> 
<dt>2008</dt> 
<dd><div id="data-one" class="bar" style="width: 5%">&nbsp;</div></dd> 
<dt>2009</dt> 
<dd><div id="data-two" class="bar" style="width: 80%">&nbsp;</div></dd> 
<dt>2010</dt> 
<dd><div id="data-three" class="bar" style="width: 64%">&nbsp;</div></dd> 
<dt>2011</dt> 
<dd><div id="data-four" class="bar" style="width: 30%">&nbsp;</div></dd> 
<dt>2012</dt> 
<dd><div id="data-five" class="bar" style="width: 30%">&nbsp;</div></dd> 
<dt>2013</dt> 
<dd><div id="data-six" class="bar" style="width: 30%">&nbsp;</div></dd> 
</dl>

CSS:

Ich habe mit diesem stundenlang herumgespielt, aber kann nicht arbeiten, wie man am besten eine zweite Leiste auf der linken Seite der Mittelsäule des Textes zu setzen. Das nächste, was ich bekam, war, die zwei Bars übereinander zu bekommen ?! Ich nehme an, es gibt einen besseren Weg, aber ich habe ehrlich gesagt keine Ahnung. Hat jemand eine mögliche Lösung?

Vielen Dank, Dave

Quelle

2014-02-11 David Lettice

Wo ist der Code auf der anderen Seite hinzuzufügen? Btw +1 für grobe Zeichnung, Geige und Code :) –

Es kann alles wirklich sein, der Code, den ich gepostet habe, ist im Grunde, was ich in einem Tutorial sowieso gefunden habe und nicht, was im wirklichen Leben verwendet würde. Sie könnten die Balkendiagramme in zwei Dreiergruppen aufteilen ... Sobald ich ein Diagramm erstellt habe, bin ich mir sicher, dass ich es replizieren könnte. Ich bleibe einfach dran, wie ich den Ball ins Rollen bringen kann. –

gut, warum dann mit dt/dd? Verwenden Sie divs ... –

Bei der Beschreibung Liste zu bleiben (<dl>, <dt>, <dd>) macht dies ein wenig schwer, ohne den HTML-Flow zu brechen, aber ich denke, ich habe einen Weg gefunden, der funktioniert und ist meist flüssig.

Fügen Sie zunächst Ihren zweiten Balken als zusätzliche <dd> Elemente, wodurch die richtige HTML-Struktur beibehalten:

<dt>2008</dt> 
<dd> 
    <div id="data-one-left" class="bar" style="width:10%">&nbsp;</div> 
</dd> 
<dd> 
    <div id="data-one-right" class="bar" style="width: 5%">&nbsp;</div> 
</dd>

Als nächstes Zentrum Ihre <dt> Elemente und gibt ihnen eine Flüssigkeit Breite und Höhe:

dl { 
    width: 100%; 
} 
dt { 
    height: 2rem; 
    width: 8%; 
    margin: 0 auto; 
    text-align: center; 
    line-height: 2rem; 
}

Jetzt ist Ihre <dd> Elemente, die die verbleibende Breite geben und sie nach links/rechts schweben:

dd { 
    width: 46%; 
    margin: -2rem; 
} 
dd:nth-of-type(odd), 
dd:nth-of-type(even) div { 
    float: left; 
} 
dd:nth-of-type(even), 
dd:nth-of-type(odd) div { 
    float: right; 
}

Hier funktioniert jsfiddle.

Das einzige, was ich über diese Lösung nicht gefällt, ist, dass ich die <dd> Elemente eine negative oberen Rand gleich der Höhe der <dt> Elemente zu geben, um Dinge hatte auszurichten. Vielleicht kann jemand anderes einen besseren Weg finden, damit umzugehen ... Ich konnte mir nichts vorstellen.

Quelle

2014-02-11 17:29:47 pschueller

Danke dafür - es sollte mir zumindest helfen, den Ball ins Rollen zu bringen, wenn nichts anderes. Hier ist, was ich bis jetzt nach ein bisschen Modifizieren habe ... http://jsfiddle.net/DEUet/5/ Offensichtlich braucht es etwas Aufräumen, aber es scheint gut zu funktionieren. Da ich ein bisschen Neuling bin, wenn es um CSS geht, kann ich nur fragen, warum Sie die negative Marge nicht mag? –

Es ist nicht so sehr der negative Rand, der mich stört, sondern mehr, dass der Rand der Höhe des DT entsprechen muss ... und dadurch eine Abhängigkeit erzeugt wird. Was CSS betrifft, ist die negative Marge vollkommen in Ordnung. Deine Geige sieht großartig aus, liebe die Animation, die du drauf machst. :-) – pschueller

prüfen http://jsfiddle.net/jfMTg/

Also ich einen Wrapper gesetzt und nach innen, 3 Säulen aus edgeLeft | Zentrum | edgeRight

Auf der linken Seite hinzugefügt Richtung: rtl, um den Effekt zu machen, die Sie wollen.

#wrapper { width:100%;} 
#edgesLeft{width:35%; background:#f5f5f5; display:inline-block; direction: rtl;} 
#edgesRight{width:35%; background:#f5f5f5; display:inline-block; padding-left:40px;} 
#center{width:25%; text-align: center;display:inline-block;}

Ich hoffe, es hilft.

Quelle

2014-02-11 16:23:07 Nibbler

http://jsfiddle.net/E9QF9/ Das wonach Sie suchen? Ich kann die Veränderungen nicht wirklich erklären, da es viel gab - schau einfach auf deinen Tisch und vergleiche die beiden!(Im Allgemeinen werden die Datenwerte in HTML) z.B

<dd> 
    <div id="data-six-left" class="bar" style="width: 60%">&nbsp;</div> 
</dd> 
<dd> 
    <div id="data-six-right" class="bar" style="width: 0%">&nbsp;</div> 
</dd>

Ändern 60% auf den Wert erforderlich, auf der linken Seite, Änderung 0% auf den Wert erforderlich, auf der rechten Seite.

Quelle

2014-02-11 18:14:29 xezno

Split-Balkendiagramm mit CSS

Antwort

Verwandte Themen