问题标签 [two-column-layout]

我最近一直在为一个网站设计一个布局，并且被 CSS 卡住了。我喜欢认为我可以按照简单的教程进行 2 列页脚布局，但我一直被其中一列的内容所困扰。

两栏设计将是左侧流动的谷歌地图和右侧固定宽度的侧边栏。我已经尝试过很多这种布局的例子，但我总是遇到用谷歌地图保持流畅的一面的问题。主要是谷歌地图不喜欢保持流动。我已经尝试了所有我能找到的带有负边距、浮动、绝对定位的 CSS 解决方案（GMaps 真的很讨厌这个），甚至尝试过表格（不寒而栗）。

有没有人有任何想法来处理这个问题？

I need CSS definitions for the following layout:

• middle-wrapper needs to be 100% wide
• column2-wrapper needs to be 250px wide
• column1-wrapper should take all available space

In summary, column1-wrapper should be 100% - 250px wide and I need both of the columns to look like columns.

I've tried adding float: left to BOTH columns. However this means column1-wrapper looses its width. On pages that do not contain enough content in the left column, the right column aligns itself with the left column and ends up somewhere in the middle of the page:

I've tried adding float: left to LEFT column and float: right to RIGHT column. That aligns the right column with the right edge but the left column does not stretch appropriately:

我正在阅读 HTML 和 CSS 书籍。它有一个两列布局的示例代码。

作者提到使用溢出自动和 1% 高度将使主要区域扩大到包含计算的内容高度。我尝试删除 1% 的高度并在不同的浏览器中尝试，但它们没有显示出差异。我对它的使用感到很困惑。任何想法？

如果我的 HTML 说明以下内容

那么是否可以像在一个两列表中一样对齐这些元素？即有 7 个元素将有 4 行，最后一行只有一个元素。

（元素本身没有特殊的类或 id，如右、左等）

我试图弄清楚如何创建一个显示两列的布局，一列在左侧，一列在右侧。我很喜欢指定左列的宽度，但由于边距和填充，我真的不想指定右列的宽度，而是让浏览器来决定。

我找不到任何这样做的例子，人们似乎总是给所有列一个固定的宽度。这是一些重现该问题的示例代码：

请注意，如果我要删除特别长的段落，右栏将足够小以适合同一行并且它会起作用。

有没有办法让右列占用剩余空间？

我有一个简单的 2 列布局（左列固定宽度 200 像素，右列扩展 100%）。

如果正确 col 的第一个元素是一个P元素，那么一切都可以。

但是当右列的第一个元素是一个INPUT元素 ( width:100%) 时，它会下降。

结果显示如下（在 Chrome、FF、IE 上测试）：

你能解释一下为什么 INPUT 字段在下一行，而 P 元素没有？以及如何解决这个问题？

代码在这里：

我想要一个有两列的容器。细节：

容器

• 宽度应调整为其父元素的 100%（很容易实现）。
• 高度必须调整以包含两列（即它的高度应该完全等于两列中较大的高度，所以没有溢出和滚动条永远不会显示）
• 最小尺寸应等于左列宽度的两倍。

一般的列

• 应该是可变的高度，以适应其内容的高度。
• 应该并排放置，以使它们的顶部边缘对齐。
• 如果将边框、填充或边距的单个像素应用于其中任何一个，则不应破坏布局或相互包裹，因为这将非常不稳定和不幸。

左栏具体

• 必须具有以像素为单位的固定绝对宽度。

右栏具体

• 宽度必须填满容器中的剩余空间。换句话说...
• 宽度必须等于容器宽度减去左列的宽度，这样如果我在该列中放置一个 DIV 块元素，将其宽度设置为 100%，将其高度设置为 10px，并为其设置背景颜色，我将看到一个 10px 高的彩色条带，从左列的右边缘到容器的右边缘（即它填充了右列的宽度）。

所需的稳定性

容器应该能够调整大小（通过调整浏览器窗口的大小）到其最小宽度（前面指定）或更大的宽度，而不会破坏布局。“中断”将包括左列完全改变大小（记住它应该具有固定的像素宽度），右列包裹在左列下方，出现滚动条，右列中的块元素未能占据整个列宽，并且通常上述任何规范都不能保持真实。

背景

如果使用浮动元素，则右列将不会包裹在左列之下，容器将无法包含两列（通过剪裁列的任何部分或允许列的任何部分溢出其边界)，或者滚动条会出现（所以我会厌倦建议使用除了溢出之外的任何东西：隐藏来触发浮动元素包含）。对列应用边框不应破坏布局。列的内容，尤其是右列的内容，不应破坏布局。

似乎有一个简单的基于表的解决方案，但在任何情况下它都失败了。例如，在 Safari 中，如果容器变得太小，我的固定宽度左列将缩小，而不是保持我指定的宽度。CSS 宽度似乎也是这种情况，当应用于 TD 元素时，它指的是最小宽度，这样如果在其中放置更大的东西，它就会扩展。我试过使用 table-layout:fixed; 没有帮助。我还看到了表示右列的 TD 元素不会扩展以填充剩余区域的情况，或者它会出现（例如，第三列 1px 宽将一直推到右侧），但是在右列周围设置边框将表明它的宽度仅与其内联内容一样宽，

我见过的一种可能的解决方案太复杂了；只要它在 IE8、Firefox 4 和 Safari 5 中工作，我就不会关心 IE6。

http://denartcc.org/images/help.jpg

正如您从我所附图片中的箭头看到的那样，我正在尝试向上滑动这四个 div（谁在线、即将发生的事件、统计数据和天气）以填补空白。右侧的列具有可变高度，当它展开时，上述四个 div 会继续向下移动页面。他们需要留在白盒子下面。

绝对定位的问题在于，四个 div（Who's Online、Upcoming Events 等）也会有不同的高度，所以我不想将第二行放在绝对位置。

HTML

CSS

2011 年，我被 2 列布局难住了。我感到惭愧。;)

挑战在于提出这个问题：

对于典型的 2 列布局，您将左列的边距设置为与右侧 div 的边距相等，这没什么大不了的。然而，这个特定示例中的变量是，我不知道在任何给定时间右侧的 div 有多宽（它基于会变化的文本行。

总之，我需要：

• 2列布局
• 两列都占据了整个宽度
• 右侧的列与其包含的文本一样宽
• 左侧的列与剩余空间一样宽

似乎我之前必须建造这个，但我很难过。

我对 CSS、JS 或 jQuery 解决方案持开放态度。

编辑：

实际上，我已经可以看到一个相当简单的 jQuery 解决方案。我可以抓取右侧 div 的渲染宽度，然后做一些数学运算，从父容器的宽度中减去该宽度，然后将左列的宽度设置为相同。如果没有干净的 CSS 选项，那将是我的后备计划。

我想要的是一个两列的 CSS 布局，有一个固定的侧边栏（在右边），比如说 300px 宽，以及一个可以扩展以适应屏幕大小和高度的流体左列，然后提供一个垂直的如果内容需要，左侧列上的滚动条。

如果有人可以提供帮助，我将永远感激不尽。

这是我到目前为止所拥有的...