3列CSS液体布局，左右边缘与父元素的边缘齐平？

Question

如何创建3列CSS布局，左右边缘与父元素的边缘齐平？我希望能够在液体布局中执行此操作，因此没有固定的宽度。

这听起来应该很容易，但我能想到的最好的事情就是黑客攻击。

<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>

...

<span class="c3">
  <span class="left"> ... 
  </span>
  <span class="center"> ...
  </span>
  <span class="right"> ...
  </span>
</span>

你可以看到它here，这个工作正常（至少在我的浏览器中），但它感觉不对。有更好的方法吗？

由于对我正在尝试做的事情似乎有些混淆，所以这里是在上下文中。我经常遇到这种情况，我已经有了页面布局，我希望在该布局中有三列。我希望这三列是“完全合理的”，我希望事情是流动的，因为即使认为页面有固定的布局，通常还有一个Facebook应用程序或其他东西，我想尽可能多地重用。这是我遇到此问题的latest example（页面底部）。

我并不担心SEO，内容通常在1-2-3的重要性顺序。我真的不在乎它们的长度是否相同。如果可能的话，我不想使用大量的标记。我的主要目标是让左边和右边与父元素齐平，并在每列之间留出相等的空间。

Answer 1

我可以尝试为您编写一个新的布局或修复您开始的布局，但我觉得我应该为您指出一个良好的布局：

  

完美3柱液体布局（百分比宽度）

     

没有CSS黑客攻击。 SEO友好。没有图像。没有JavaScript。跨浏览器＆amp; iPhone兼容。

     

http://matthewjamestaylor.com/blog/perfect-3-column.htm

我已经使用了这个资源很多年了，即使在IE6中，它仍然坚如磐石。请务必单击以查看所有示例，并阅读文章以便了解其工作原理。

这是基本布局结构的图像（不是实际输出）：

它使用了一些狡猾的相对定位和SEO友好的2-1-3源顺序。全高度人造柱，固定宽度或流体柱......

我不能推荐这个资源，我希望你喜欢它。

---

好的，听起来你只想要一个轻量级替代你已经在工作的解决方案。

根据我们在聊天中的讨论，我发布了我创建的迷你模板：

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div class="last">3</div> <!-- or use CSS3 :last selector -->
</div>

.wrapper {
    width:500px; /* any width OK */
    float:left;
}

.wrapper div {
    width:30.65%; /* not perfect, but close */
    padding:1%;
    margin:0 0 0 1%;   
    float:left;
}

.wrapper div:first-child { margin:0; }

 /* make up for imperfect 1/3 width rounding */
.last { float:right;margin:0 }

演示：http://jsfiddle.net/bH8vY/2/

祝你好运。

Answer 2

据我所知，我在问题中提出的解决方案是最佳答案。我没有找到任何其他建议，因为发布这个可以实现我想要的。

我将在此重申，以便可以结束这个问题。

<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>

...

<span class="c3">
  <span class="left"> ... 
  </span>
  <span class="center"> ...
  </span>
  <span class="right"> ...
  </span>
</span>

Answer 3

这可能是你想要/帮助你的;我制作了一个使用css来模拟动态table行为的布局[使用div s]。它适用于Chrome，Firefox和IE＆gt; 7.

DEMO，继续调整窗口大小。我想，middle位是你想要的。

拥有fiddle。取消注释border css行以查看最新情况。

<强>代码：

<div class="view" style="height:100%; width:100%">
    <div class="north">
        n
    </div>

    <div class="middle">
        <div class="west">
            w
        </div>

        <div class="centre">
            c
        </div>

        <div class="east">
            e
        </div>
    </div>

    <div class="south">
        s
    </div>
</div>

html, body {
    height : 100%;
    margin : 0;
}

.view,
.view > .middle {
    display : table;
}

.view > .north,
.view > .south {
    height : 1px;
    display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }

.view > .middle > div {
    display : table-cell;
}
.view > .west,
.view > .east {
    width : 1px;
}

/*div { border : 1px solid black; }*/

简单标记，无JS和动态布局。