问题描述
如何创建3列CSS布局，左右边缘与父元素的边缘齐平？我想能够在一个流畅的布局中做到这一点，所以没有固定的宽度。
How can I create a 3 column CSS layout, with the left and right edges flush with edges of parent element? I want to be able to do this within a liquid layout, so no fixed widths.
这听起来应该很容易，但最好的事情，我可以想出
This sounds like it should be easy, but the best thing I can come up with is quite a hack.
<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>
您可以看到，这个工作正常（至少在我的浏览器），但它只是感觉错了。有没有更好的方法来做到这一点？
You can see it here, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?
由于似乎有一些混乱，我想要做的，这里是在上下文。我经常遇到这种情况，我已经有一个页面布局，我想在该布局中的三列。我想让三列完全合理，我想要的东西是液体，因为即使认为页面有固定的布局，通常有一个Facebook应用程序或东西，我喜欢尽可能多的重用。以下是我遇到的（页面底部） ）。
Since there seems to be some confusion about what I'm trying to do, here it is in context. I run into this fairly often, where I already have a page layout and I want three columns within that layout. I want the three columns to be "fully justified," and I want things to be liquid, because even thought the page has a fixed layout, there's usually a facebook app or something also and I like to reuse as much as possible. Here's the latest example of where I've run into this (bottom of the page).
我不担心SEO，内容通常是1-2-3重要的顺序。我真的不在乎他们是否都是相同的长度。我想不使用大量的标记，如果可能的话。我的主要目标是使左右边缘与父元素齐平，并在每列之间有相等的空间。
I'm not worried about SEO, the content is usually in 1-2-3 order of importance. I don't really care if they're all the same length. I'd like to not use a ton of markup if possible. My main goal is to have the left and right edges flush with the parent element, and and equal amount of space between each column.
推荐答案
p>据我所知，我在问题中给出的解决方案是最好的答案。我没有发现任何其他建议，因为发布这将实现我想要的。
As far as I can tell, the solution I gave in the question is the best answer for this. I haven't found any other suggestions since posting this that would achieve what I want.
我会在这里重申，这样问题可以关闭。
I'll reiterate it here so the question can be closed.
<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>
这篇关于3列CSS液体布局，左右边缘与父元素的边缘齐平？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！