Reine CSS Zwei-Spalten-Layout

Question

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.

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!

Answer 1

Weave:http://kodeweave.sourceforge.net/editor/#f336823273b963b2c364bc34bd11a1d5

Wenn Sie einen Blick in JqxSplitterresizable columns nehmen wollen. (Erfordert JQuery)

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background: #dedede; 
 
} 
 

 
.content { 
 
    padding: 10px; 
 
    margin: 20px; 
 
    border: 1px solid #000; 
 
    background: #fff; 
 
} 
 
.desc, .code { 
 
    width: 43%; 
 
} 
 

 
.desc { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
.code { 
 
    display: inline-block; 
 
    float: right; 
 
    background: #eee; 
 
    color: #333; 
 
    border: 1px solid #aaa; 
 
    height: 100%; 
 
    padding: 10px; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div class="desc"> 
 
     <h3>Data Organization</h3> 
 
     
 
     Data on Quandl is organized into databases and datasets. 
 

 
<p>A dataset is a single time series, with one or more columns. Column 0 of a dataset is always the date column. Columns 1 to n are data columns.</p> 
 

 
<p>A database is a collection of datasets from a single publisher and/or on a single subject.</p> 
 

 
<p>The Quandl API provides methods to access both dataset and database objects, provided you know their Quandl codes.</p> 
 
    </div> 
 
    <pre class="code">html, body { 
 
    height: 100%; 
 
} 
 

 
.lorem { 
 
    border: 1px solid #000; 
 
} 
 

 
.ispum { 
 
    float: left; 
 
} 
 
.door { 
 
    float: right; 
 
}</pre> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="desc"> 
 
     <h3>Quandl Codes</h3> 
 
     
 
     Every database on Quandl has a unique string identifier called the database_code. 
 

 
<p>Every dataset on Quandl belongs to one and exactly one database. Every dataset thus has a database_code as well as a dataset_code associated with it. Both of these are required to uniquely identify the dataset.</p> 
 

 
<p>The combination of database_code and dataset_code is called the Quandl code.</p> 
 
    </div> 
 
    <pre class="code">html, body { 
 
    height: 100%; 
 
} 
 

 
.lorem { 
 
    border: 1px solid #000; 
 
} 
 

 
.ispum { 
 
    float: left; 
 
} 
 
.door { 
 
    float: right; 
 
}</pre> 
 
    </div> 
 
</div>

Answer 2

Hier ist ein einfaches demo ist. HTML:

<div class="left"> 
<p>Some explanation goes here</p> 
<p>Another example...</p> 
</div> 
<div class="right"> 
<pre> // some code goes here </pre> 
<pre> // more example code goes here </pre> 
</div> 

CSS:

div.left { 
    float: left; 
    width: 50%; 
} 

div.right { 
    float: right; 
    width: 50%; 
} 

Answer 3

Zwei Blockelemente haben die Breite 50%, Marge ist auch 50%, und das ist 150%. Browser max. width ist 100%, also müssen Sie den Rand und alle Umrandungen um Elemente (Rand haben auch eine Breite, egal wie klein ..) zu beseitigen, um float funktioniert. Sie können die Breite der beiden Blockelemente beispielsweise auf 45% (ohne Rand) einstellen, und da sie rechts und links schweben, haben Sie die Lücke von 10%. Ancor ist kein Blockelement zu machen, wie eine solche verhalten Sie in CSS schreiben müssen:

a {display: block} 

‚pre‘ Element Bedürfnisse ‚Überlauf‘ auf ‚Auto‘ oder ‚versteckt‘.

Answer 4

Verschieben Sie das pre Tag über der linken Spalte im HTML - Floating-Elemente auf der rechten Seite bedeutet oft, dass sie vor die Elemente auf der linken Seite im HTML angezeigt werden müssen. Durch das Umschließen beider Spalten in einem gemeinsamen Div können Sie auch alle vorherigen Spalten löschen.

Sie die calc Eigenschaft für Breiten verwenden können ....

<div class="wrap"> 
    <div class="rightcol"> 
     <pre> //Code output </pre> 
    </div> 
    <div class="leftcol"> 
     <h1>Some Text here</h1> 
    </div> 
    <div class="clear"></div> 
</div> 

Sie können den obigen HTML-Schleife und es so oft wie Sie wollen. Es verwendet dasselbe CSS und erstellt in jeder Iteration 2 Spalten.

.wrap { 
    clear: both; 
padding: 10px; 
margin: 20px; 
border: 1px solid #000; 
background: #fff; 
} 
.rightcol { 
    width: calc(50% - 22px); 
    background: #eee; 
    color: #333; 
    border: 1px solid #aaa; 
    float: right; 
    padding: 10px; 
    display: inline-block; 

    height: 200px; /*this is just for the fiddle*/ 
} 
.leftcol { 
    width: calc(50% - 22px); 
    display: inline-block; 
    padding: 10px; 
} 
h1 { margin:0; padding:0;} 
.clear { clear: both; } 

Here's a jsFiddle Sample

Einige kleinere CSS Media Queries für die linke und Fahrt Seite erlauben würde, diese zu reagieren.

Answer 5

Dies ist sehr einfach. Fügen Sie float:left zu Absätzen und Codeblöcken hinzu. Verwenden Sie clear:left auf ps. Stellen Sie sicher, dass genügend Platz für zwei nebeneinander liegende Elemente vorhanden ist. Fügen Sie overflow:auto dem Container hinzu. So: http://codepen.io/anon/pen/grqRPr. Fügen Sie etwas Polsterung hinzu, wenn Sie eine 'Gutter' wollen.