带有有序列的 CSS 圣杯

Question

虽然这个问题通常很常见，但我还没有找到解决此版本中特定限制的答案。

我希望实现 the holy grail，但有一个重要警告：列必须保持从左到右的顺序，L（left），C（center )，R(right)，不使用绝对定位。

除了上述主要要求外，兼容性也很高；请注意，我并不是要支持像 IE6 这样荒谬的东西；至少IE7会更好。 （是的，我认为这几天很荒谬）鉴于此，显而易见的calc() CSS 功能不适用。

在链接的文章中，A List Apart 引用“正确的源顺序”将其实现为 C-L-R，并且许多人都遵循这一趋势，认为 SEO 的好处是因为主页内容首先出现在源顺序中。此外，它在视觉上也有效。

不幸的是，SEO 和可访问性是两种不同的野兽。我注意到大多数 Web 可访问性工具（例如，JAWS）会以 DOM 顺序读取页面内容，这是可以理解的；自上而下，从左到右。

这是一些相当标准的 L-C-R 标记：

<div class="wrapper">
    <div class="container">
        <div class="column-l">
            <div class="cell">Column L</div>
        </div>
        <div class="column-c">
            <div class="cell">Column C</div>
        </div>
        <div class="column-r">
            <div class="cell">Column R</div>
        </div>
    </div>
</div>

还有一个 CSS 的 sn-p 与之配套：

.wrapper {
    width: 100%;
}
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.cell {
    padding: 1em;
}

考虑到全宽 .wrapper 和 90% 宽度以边距为中心的 .container，我试图将 .column-l 和 .column-r 显示为固定宽度（比如说 300px )，以.column-c 作为流体。

通过为.column-l 赋予float: left; 属性，并将300px 中的margin-left 应用到.column-c，这两列就到位了：

.column-l {
    width: 300px;
    float: left;
}
.column-c {
    margin-left: 300px;
}

问题是.column-r。它不想坐在我想要的地方。将float: right; 应用于.column-r 会将其置于其他两个之下（请注意，至少它在右侧）。即使我将margin-right: 300px; 应用于.column-c，也是如此。

Answer 1

.column-l {
    width: 300px;
    background: red;
    display:table-cell;
}
.column-c {
    background: green;
    display:table-cell;
}
.column-r {
    width: 300px;
    background: blue;
    display:table-cell;
}

这有帮助吗？没有浮动，左右有 300px 宽度，中心填充其余部分，都具有相同的高度。

Answer 2

在容器类上设置display:table，在列上设置display:table-cell;

FIDDLE

Answer 3

这是一个修改后的答案。 Here's the original.

以下是一个相当简单的模式，源于聊天中的人们的帮助，只是修补了一段时间。它符合我的问题中描述的要求，但是它确实使用了一个非语义<div>（比旧答案少一个）。尽管如此，IDGAF 因为它只在给定页面上出现一次（或少数次）。非语义<div> 通常可以替换 HTML5 语义分段块，因此几乎不是问题。

我的原始答案中描述的错误，中心栏在没有内容的情况下缩小，已被消除。

概述

此解决方案使用 3 列，L (left) R (right) 和 C （center），L和R是固定宽度，C是流动的。

此解决方案的核心依赖于边距（正面和负面）和.with-r/.with-l 修饰符类。

.with-l/.with-r 修饰符类应用于.column-container。它们分别添加正的左右边距，每个分别等于左右列。 （在我的例子中，他们都是240px）

左列和右列都被分配了它们的固定宽度（同样，240px）以及一个等于它们宽度的负边距。左列的负边距应用于左侧，右侧应用于右侧。

这个解决方案的 真棒 是，如果我想使用 2 列布局，只有 C 和 L 列，我只是删除了 R 列和相关的修饰符.with-r。删除 L 列也是如此。

JSFiddle

http://jsfiddle.net/5yq7J/（与下面相同，只是使用 Lorem Ipsum）

SCSS

/*************************/
/* quick and dirty reset */
/*************************/
* { 
    margin: 0;
    padding: 0;
    outline: 1px dotted #f00; 
}

/*************************/
/* some boilerplate crap */
/*************************/
%block {
    position: relative;
    display: block;
}

%clear {
    &:after {
        @extend %block;
        content: "";
        float: none;
        clear: both;
        width: 100%;
    }
}

%layer {
    @extend %block;
    @extend %clear;
}

/***********************************/
/* all the important stuff follows */
/***********************************/

.container { 
    @extend %layer;
    margin-left: auto;
    margin-right: auto;
    min-width: 960px;
    width: 90%;
}

.column-container {
    @extend %layer;
    &.with-l { margin-left: 240px; }
    &.with-r { margin-right: 240px; }
}

%column { 
    @extend %block;
    float: left; 
}

.column-l {
    @extend %column;
    width: 240px;
    margin-left: -240px;
}

.column-c {
    @extend %column;
    width: 100%;
}

.column-r {
    @extend %column;
    width: 240px;
    margin-right: -240px;
}

.cell { 
    @extend %layer;
    padding: 1em;
}

HTML

<h1>Columns L, C &amp; R</h1>
<div class="container">
    <div class="column-container with-l with-r">
        <div class="column-l">
            <div class="cell">
                <h2>Column L</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-r">
            <div class="cell">
                <h2>Column R</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
    </div>
</div>

<h1>Columns L &amp; C</h1>
<div class="container">
    <div class="column-container with-l">
        <div class="column-l">
            <div class="cell">
                <h2>Column L</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
    </div>
</div>

<h1>Columns C &amp; R</h1>
<div class="container">
    <div class="column-container with-r">
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
        <div class="column-r">
            <div class="cell">
                <h2>Column R</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
    </div>
</div>

<h1>Column C</h1>
<div class="container">
    <div class="column-container">
        <div class="column-c">
            <div class="cell">
                <h2>Column C</h2>
                <p>Lorem ipsum dolor...</p>
            </div>
        </div>
    </div>
</div>