Question

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

我希望实施the holy grail，但有一个重要的警告：列必须按从左到右的顺序保留，L（左），C（中心），R（右），不使用绝对定位。

除了上述主要要求外，列表中的兼容性相当高;请注意，我不是要像IE6那样支持任何荒谬的事情;至少IE7会更好。（是的，我认为这些日子很荒谬）鉴于此，立即显而易见的calc() CSS功能不适用。

Left-to-right ordered columns

在链接的文章中，A List Apart已将此作为C-L-R实施，引用了“正确的源顺序”，并且许多人已经遵循这一趋势，认为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：

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

考虑到全宽.wrapper和90％宽度以边距为中心.container，我试图将.column-l和.column-r显示为固定宽度（< em>说300px ），.column-c为流体。

通过向.column-l提供float: left;属性，并将margin-left 300px应用于.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 （左） R （右）和 C （ center ）， L 且 R 为固定宽度， C 为流动。< / p>

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

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

左右列各自分配了固定宽度（，240px ）以及负边距等于其宽度。左列的负边距应用于左侧，右侧则应用于右侧。

关于此解决方案的 awesome 事情是，如果我想使用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>

CSS圣杯与有序列

3 个答案:

概述

的jsfiddle

SCSS

HTML