純粋なCSSの2つの列レイアウト

Question

私は現在Jekyllを使用していて、thisのようなものを作成しようとしています。コードは右側にあり、説明は左側にあります。

ジキルの値下げプロセッサからの出力は次のようなものになります。

<p>Some explanation goes here</p> 
<pre> // some code goes here </pre> 
<p>Another example...</p> 
<pre> // more example code goes here </pre> 

をこれまでのところ、私はCSSでfloatを使用してwidth: 50%;を行うことにより、2列の外観を実現することができました。私はテキストの右側にコードをしたいのに対し、

pre { 
    float: right; 
    width: 50%; 
} 

h1, h2, h3, h4, h5, h6, p, a { 
    float: left; 
    width: 50%; 
    margin-right: 50%; 
} 

しかし、これは、私がしたいテキストの下にあること<pre>タグになります。

純粋なCSSを使用してこの問題を解決するにはどうすればよいでしょうか？

ありがとうございます！

Answer 1

織り：http://kodeweave.sourceforge.net/editor/#f336823273b963b2c364bc34bd11a1d5

あなたはresizable columnsがJqxSplitterに見てみたい場合。ここでは、単純なdemoある

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

（JQueryが必要です）。 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

二つのブロック要素の幅の50％を持っているが、利益率も50％であり、それは150％です。ブラウザ最大幅は100％ですので、浮動小数点演算を行うためには、余白や要素の周りの境界線を取り除く必要があります（境界線にも幅があります）。 2つのブロック要素の幅を45％（余白なし）に設定することができます。左右に浮動するので、それらの間に10％のギャップがあります。 AncorあなたはCSSで記述する必要がありますようにのように動作させるために、ブロック要素ではありません。

a {display: block} 

「前」要素は、「自動」または「隠し」に設定「オーバーフロー」を必要とします。

Answer 4

HTML浮動要素の左側の列の上にあるpreタグを右に移動すると、HTMLの左側の項目であるの前にと表示する必要があることがよくあります。また、共通のdivに両方の列をラップすると、以前の列をクリアすることができます。

あなたはあなたがループ上のHTMLとできるだけ頻繁にあなたが望むようにそれを使用することができます

<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> 

....幅のためcalcプロパティを使用することができます。同じCSSを使用し、すべての反復で2つの列を作成します。

.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

左と乗る側のためのいくつかのマイナーなCSSメディアクエリは、これが応答することが可能になります。

Answer 5

これは非常に簡単です。段落とコードブロックにfloat:leftを追加します。 pにはclear:leftを使用してください。互いに隣り合う2つの要素に十分なスペースがあることを確認します。 overflow:autoを容器に加えます。このように：http://codepen.io/anon/pen/grqRPr。あなたは 'ガッタ'をしたい場合はいくつかのパディングを追加します。