Einen Artikel bei HIVE in 2 Spalten schreiben - 2 Varianten zur Darstellung

Der ein oder andere hat es bereits schonmal gesehen und möchte vielleicht auch einmal einen 2-spaltigen Text bei Hive veröffentlichen. Dies ist Dank eines kleinen bisschen Code recht einfach und schnell möglich. Wichtig hierbei ist, das am Ende der beiden Spalten entweder --- für eine Trennlinie da ist oder ein transparentes PNG. Ich hab da vor ein paar Tagen auf dem D-A-CH Discord einmal etwas vorbereitet, damit ihr diese Code-Snippets recht einfach nutzen könnt.

Variante 1 (Mit Trennlinie - Text Normal) Preview

---

Code für die obere Ansicht:

<div class="pull-left">

### Linksbündig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div>
<div class="pull-right">

### Rechtsbüdig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div>

---

Variante 1 (Mit Trennlinie - Text im Blocksatz) Preview

---

Code für die obere Ansicht:

<div class="pull-left"><div class="text-justify"> 

### Linksbündig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div></div>
<div class="pull-right"><div class="text-justify">

### Rechtsbüdig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div></div>

---

Variante 2 (Mit transparenter Trennlinie - Normaler Text) Preview

Code für die obere Ansicht:

<div class="pull-left">

### Linksbündig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div>
<div class="pull-right">

### Rechtsbüdig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div>

![](https://i.imgur.com/VAQqUgK.png)

Variante 2 (Mit transparenter Trennlinie - Text im Blocksatz) Preview

Code für die obere Ansicht:

<div class="pull-left"><div class="text-justify"> 

### Linksbündig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div></div>
<div class="pull-right"><div class="text-justify"> 

### Rechtsbüdig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div></div>

![](https://i.imgur.com/VAQqUgK.png)

---

Soviel zu den beiden verschiedenen Darstellungsmöglichkeiten. Natürlich kann man auch Bilder dementsprechend Links/Rechts darstellen. Probiert's mal aus - der Live-Preview Editor bei PeakD arbeitet dahingehend sehr gut und zeigt sehr gut, wie das Endresultat dann auf der Chain aussehen wird.

Falls du mal nen Spacer / Abstands Bild benötigst, ist hier die Adresse / Code für eine transparente Grafik mit 1px Höhe und glaube 800px Breite. Sie ist dahingehend unsichtbar. (Achtung: Diese Grafik sollte demnach nicht als erste Grafik in einem Beitrag definiert werden, da dies sonst das Vorschaubild ist ;) )

PNG Grafik:
![](https://i.imgur.com/VAQqUgK.png)

Schreibt's gern in die Comments, wenn ihr erfolgreich die Zwei-Spalten Layouts verwendet habt.

Viele Grüße
louis

PS: Funktioniert sogar in Comments :)