纯CSS两列布局 [英] Pure CSS Two Column Layout

问题描述

我目前正在使用Jekyll，我正在尝试创建类似的内容

I am currently using Jekyll, and I am attempting to create something that looks like this, where the code is on the right and the explanations are on the left.

Jekyll的markdown处理器的输出看起来像这样：

The output from Jekyll's markdown processor will look something like 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 ，并使 width：50％; 。

So far, I have been able to achieve the two-column look by using float in CSS and making width: 50%;.

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

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

但这会导致< pre> 标签低于我想要的文本，而我想要的文本的右边的代码。

However, this results in the <pre> tags being below the text I want, whereas I want the code to the right of the text.

使用纯CSS最好的解决方法是什么？

What would be the best way to solve this problem using pure CSS?

谢谢！

推荐答案

两个块元素的宽度为50％ ，保证金也是50％，这是150％。浏览器最大宽度是100％，所以你需要消除边缘和任何边框元素（边框也有一些宽度，无论多么小..），以使浮动工作。
您可以将两个块元素的宽度设置为例如45％（没有任何边距），并且因为它们向右和向左浮动，所以它们之间将有10％的间距。
Ancor不是一个块元素，为了使行为像这样你需要写在css：

Two block elements have the width 50%, margin is also 50%, and that's 150%. Browser max. width is 100%, so you need to eliminate margin and any border around elements (border also have some width, no matter how small..) in order to make float works. You may set width of the two block elements on, for example, 45 % (without any margin), and because they are floating right and left, you'll have the 10 % gap between them. Ancor is not a block element, to make behave like such you'll need to write in css:

a {display: block}

'pre'元素需要'overflow'设为'auto' '。

'pre' element needs 'overflow' set to 'auto' or 'hidden'.

这篇关于纯CSS两列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！