纯 CSS 两列布局

Question

我目前正在使用 Jekyll，我正在尝试创建类似于 this 的内容，其中代码在右侧，说明在左侧。

Jekyll 的降价处理器的输出将如下所示：

<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%; 来实现两列外观。

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

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

但是，这会导致<pre> 标记位于我想要的文本下方，而我希望代码位于文本的右侧。

使用纯 CSS 解决此问题的最佳方法是什么？

谢谢！

Answer 1

这是一个简单的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>

CSS：

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

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

Answer 2

两个块元素的宽度为 50%，边距也是 50%，也就是 150%。浏览器最大值宽度是 100%，所以你需要消除边距和元素周围的任何边框（边框也有一些宽度，不管多小..）才能使浮动工作。 例如，您可以将两个块元素的宽度设置为 45 %（没有任何边距），并且因为它们左右浮动，所以它们之间会有 10 % 的间隙。 Ancor 不是块元素，要使其表现得像这样，您需要在 css 中编写：

a {display: block}

'pre' 元素需要将 'overflow' 设置为 'auto' 或 'hidden'。

Answer 3

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

编织： 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 5

这很简单。将float:left 添加到段落和代码块中。在 p 上使用clear:left。确保有足够的空间容纳两个相邻的元素。将overflow:auto 添加到容器中。像这样：http://codepen.io/anon/pen/grqRPr。如果你想要一个“排水沟”，请添加一些填充。