3列的CSS建议

标签 css

我想创建一个像这样的标题:

<div id="header>
 <span class="left></span>
 <span class="center"></span>
 <span class="right></span>
</div>

所以有一个全内嵌的标题。 left 一直到左边,right 一直到右边,center 在header 的中央。

挑战在于#header 是流动的。任何 CSS 建议。现在我能想到的最好的方法是使用 3 行的表格。

谢谢

最佳答案

试试这个:

http://jsfiddle.net/z7k3J/

如果您调整页面中间的间隔条,您会看到所有“列”都保持适当对齐。

关键是所有列的宽度总和为 100%,并且您将它们全部 float 到左侧(或右侧,这并不重要)。当您的宽度基于百分比时,它们会随着父级更改尺寸而适当调整。

如果您只关心文本是右/中/左(而不是图像等),您还可以将所有列设置为 100% 宽度并绝对定位,然后只使用文本对齐:

http://jsfiddle.net/h7qB8/

关于3列的CSS建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4207791/

相关文章:

javascript - 如何用jquery平滑移动模拟类的秒针

javascript - 在对象方法中使用变量导致 "Unknown Format"

javascript - 滚动时突出显示 div 中的文本行

javascript - 使用 webpack 提取 Scss

css - 有没有办法在 CSS 中加减值?

javascript - 外部 jquery 可拖动/可调整大小的 div 不允许我选择内部跨度的文本

html - 我第一次打开我的网站时看到的故障有什么解决方案吗?

javascript - animate.css 的自定义函数导致问题

css - AsciiDoc 到 html5 外部 css

html - 最小宽度为 "becomes a block"的流体元素