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}

＆＃39;预＆＃39;元素需求＆＃39;溢出＆＃39;设置为＆＃39; auto＆＃39;或者＆＃39;隐藏＆＃39;。

Answer 3

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

将HTML中的左侧列上方的pre标记 - 浮动元素向右移动通常意味着它们需要在 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添加到段落和代码块中。在p上使用clear:left。确保有足够的空间容纳两个元素彼此相邻。将overflow:auto添加到容器中。像这样：http://codepen.io/anon/pen/grqRPr。如果你想要一个“装订线”，可以添加一些填充。

纯CSS两列布局

5 个答案: