Ich verwende derzeit Jekyll, und ich versuche etwas zu erstellen, das wie this aussieht, wo der Code auf der rechten Seite ist und die Erklärungen auf der linken Seite sind.Reine CSS Zwei-Spalten-Layout
Die Ausgabe von Jekyll Abschlags Prozessor etwas wie folgt aussehen:
<p>Some explanation goes here</p>
<pre> // some code goes here </pre>
<p>Another example...</p>
<pre> // more example code goes here </pre>
Bisher konnte ich durch die Verwendung float
in CSS die zweispaltige Look erzielen und width: 50%;
machen.
pre {
float: right;
width: 50%;
}
h1, h2, h3, h4, h5, h6, p, a {
float: left;
width: 50%;
margin-right: 50%;
}
Dies führt jedoch in den <pre>
Tags unter dem Text Ich möchte zu sein, während ich den Code auf der rechten Seite des Textes wollen.
Was wäre der beste Weg, um dieses Problem mit reinem CSS zu lösen?
Danke!
Die Verwendung von div-Tags erleichtert das Leben. Versuchen Sie, zwei Div-Felder für links und rechts zu erstellen, und passen Sie den Code an. – PseudoAj
Versuchen Sie, 'clear: both;' zu der zweiten Regel hinzuzufügen. – marcelo2605
Einverstanden, div würde das super einfach machen. Ich denke jedoch nicht, dass ich divs in Markdown hinzufügen kann und der Markdown-Prozessor es richtig rendern lässt. Wenn Sie einen vorschlagen könnten, der Markdown in HTML-Tags übersetzt und direkt in Jekyll stecken kann, wäre das großartig! – user75454