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

如何创建一个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>

<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>

.c3{显示：块；文本对齐：中心；}
.c3 span{显示：内联块；宽度：20%；文本对齐：左侧；垂直对齐：顶部；}
.c3.左{float:left；}
.c3.右{float:right；}

... 
...
...

你可以看到，这很好（至少在我的浏览器中）但感觉不对。有更好的方法吗

因为我试图做的事情似乎有些混乱，所以这里是上下文。我经常遇到这种情况，我已经有了一个页面布局，我希望在这个布局中有三列。我希望这三个栏目是“完全合理的”，我希望内容是流动的，因为即使页面有固定的布局，通常也有一个facebook应用程序或其他东西，我喜欢尽可能地重复使用。下面是我遇到这个问题的原因（页面底部）

---

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

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

完美的3柱液体布局（百分比宽度） 没有CSS黑客。搜索引擎优化友好。没有图像。没有JavaScript。跨浏览器和iPhone兼容。

我已经使用这个资源很多年了，它坚如磐石，甚至在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>

演示：

---

祝你好运。

据我所知，我在问题中给出的解决方案是最好的答案。我没有发现任何其他的建议，因为张贴这将实现我想要的

我会在这里重申，这样问题就可以结束了

.c3{显示：块；文本对齐：中心；}
.c3 span{显示：内联块；宽度：20%；文本对齐：左侧；垂直对齐：顶部；}
.c3.左{float:left；}
.c3.右{float:right；}

... 
...
...

这可能是您想要/帮助您的；我制作了一个布局，它使用

css

来模拟动态

table

行为[使用

div

s]。它适用于Chrome、Firefox和IE>7

，尝试调整窗口的大小。我想中间那个

位就是你想要的

对它有兴趣。取消注释
边框
css行以查看发生了什么

代码：


N
W
C
E
s

html，正文{
身高：100%；
保证金：0；
}
看法
.view>.middle{
显示：表格；
}
.view>.north，
.view>.south{
高度：1px；
显示：表格行；
}
.view>.north{垂直对齐：顶部；}
.view>.south{垂直对齐：底部；}
.view>.middle>div{
显示：表格单元格；
}
.view>.west，
.view>.east{
宽度：1px；
}
/*div{边框：1px纯黑色；}*/

简单的标记、无JS和动态布局。
投票失败有什么特殊原因吗？我展示了我的研究成果，问题是明确的，目标似乎相当普遍和有用。这个网站上的很多人都很可笑，除了否决投票外，别无选择。。。特别是如果他们不想帮助你，如果你给别人一个答案，想知道我们能做些什么来阻止这种毫无价值的否决权交易。关键是人们并不真正理解否决票到底有多严重。不要爱上这个人。你会浪费时间帮助他，然后他会改变对你的问题！投票结束，快跑！你的意思是读这样的东西？我只是在看这个，但我不认为它符合我的要求。看起来他在那个页面上使用了那个布局。试着给右边的列一个与父元素齐平的边框（如我的示例中所示），我不知道怎么做。我遗漏了什么吗？是的，每一页都是布局的演示。“
如何创建一个3列CSS布局，左右边缘与父元素的边缘齐平？我希望能够在液体布局中实现这一点，因此没有固定的宽度。
”。。。你说这不符合你的要求？添加边界当然是可能的。如果你有一个具体的问题，尽管问吧。仍然没有为我澄清任何事情。您可以将这些布局中的任何一个放入一个固定宽度的容器中。我链接到的布局是一个起点，而不是成品。编辑：好的，我知道你想要什么了，一些你可以扔进页面的迷你模板？你仍然可以使用我链接到的布局。我是tellin ya，即使最近有这么多CSS3魔法，对于布局这样的简单事情也没有解决方案。我敢说，你可以只使用一张桌子或固定高度的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 }

<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>