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

【问题标题】：3 column CSS liquid layout, with left and right edges flush with edges of parent element?3列CSS液体布局，左右边缘与父元素的边缘齐平？
【发布时间】：2014-01-21 14:50:41
【问题描述】：

如何创建一个 3 列 CSS 布局，左右边缘与父元素的边缘齐平？我希望能够在流动布局中做到这一点，所以没有固定的宽度。

这听起来应该很容易，但我能想到的最好的办法是相当 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>

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

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

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

【问题讨论】：

投反对票有什么特别的原因吗？我展示了我的研究成果，问题很明确，目标似乎相当普遍和有用。
这个网站上的很多人都很可笑，除了投反对票之外别无他法……尤其是如果他们不想帮助您，并且如果您将答案奖励给其他人。
想知道我们能做些什么来阻止这种毫无价值的投反对票业务。关键是人们并不真正了解反对票的严重程度。
不要爱上这个家伙。你会浪费你的时间帮助他，然后他会改变他对你的问题！投反对票并运行！
你的意思是阅读像this这样的东西？

标签： css layout html

【解决方案1】：

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

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

没有 CSS hack。搜索引擎优化友好。没有图像。没有 JavaScript。跨浏览器和 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/

祝你好运。

【讨论】：

我只是在看这个，但我不认为它符合我的要求。看起来他正在该页面上使用该布局。尝试为右列提供与父元素齐平的边框（如我的示例中所示），我不知道如何做到这一点。我错过了什么吗？
是的，每一页都是的布局演示。 “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.”... 你说这不符合你的要求？添加边框当然是可能的。如果您有具体问题，请随时提出。
仍然没有为我澄清任何事情。您可以将这些布局中的任何一个放入固定宽度的容器中。我链接到的布局是一个起点，而不是成品。编辑：好的，我知道你想要什么，你可以把某种迷你模板扔进页面吗？您仍然可以使用我为此链接的布局。我告诉你，即使最近使用了所有这些 CSS3 魔法，对于像布局这样的简单事情也没有解决方案。我敢说，您可能只使用表格或固定高度的 div。
你能做到这一点，使红色轮廓位于屏幕边缘吗？我不能。 jsbin.com/ivudor/edit#html,live
好吧，你觉得我使用的方法有什么问题吗？它不需要大量的标记，就可以获得我想要的效果。这会以某种我没有想到的方式中断吗？我只是不喜欢它在语义上不干净，但这种选择似乎更不干净。顺便说一句，+1 帮助我。

【解决方案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>

【讨论】：

我使 c3 具有样式位置：relative，然后使 .center 具有样式位置：absolute;顶部：0；左：50%；变换：translateX（-50%）； -moz 变换：translateX（-50%）； -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%);

【解决方案3】：

这可能是您想要/帮助您的；我制作了一个使用css 模拟动态table 行为的布局[使用divs]。它适用于 Chrome、Firefox 和 IE>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，动态布局。

【讨论】：