Pure CSS Two Column Layout

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> 

До сих пор я был в состоянии достигнуть вида два столбца с помощью float в CSS и сделать width: 50%;.

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

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

Однако, это приводит к <pre> теги будут ниже текст, я хочу, а я хочу код справа от текста.

Что было бы лучшим способом решить эту проблему, используя чистый CSS?

Спасибо!

Answer 1

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

Если вы хотите resizable columns взглянуть в JqxSplitter. (Требуется 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

Вот простой demo. 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> 

УС:

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

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

Answer 3

Два элемента блока имеют ширину 50%, рентабельность также 50%, и это 150%. Максимальное количество браузеров. ширина составляет 100%, поэтому вам нужно устранить маржу и любую границу вокруг элементов (граница также имеет некоторую ширину, независимо от того, насколько мала ..), чтобы сделать поплавок. Вы можете установить ширину двух элементов блока, например, на 45% (без какого-либо поля), а так как они плавают вправо и влево, у вас будет промежуток в 10% между ними. Анкор не является блочным элементом, чтобы вести себя как таковой вы должны будете написать в CSS:

a {display: block} 

«пре» требуется элемент «переполнение» значение «Авто» или «скрытый».

Answer 4

Переместить тег pre над левым столбцом в HTML - плавающие элементы справа часто означают, что они должны появиться до с левой стороны в HTML. Кроме того, объединение обоих столбцов в общий div позволит вам удалить все предыдущие столбцы.

Вы можете использовать calc свойство для ширины ....

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

Вы можете цикл вышеупомянутую HTML и использовать его так часто, как вы хотите. Он будет использовать один и тот же 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 в параграфы и кодовые блоки. Используйте clear:left на p. Удостоверьтесь, что достаточно места для двух элементов рядом друг с другом. Добавить overflow:auto в контейнер. Примерно так: http://codepen.io/anon/pen/grqRPr. Добавьте прописку, если хотите «желоба».