响应式布局答案

【问题标题】：Responsive Layout响应式布局
【发布时间】：2013-05-27 08:41:19
【问题描述】：

我目前正在创建部分响应式布局模板（适用于平板电脑和台式机）。我在以像素和百分比为单位的宽度上遇到问题。

我有 2 个主要列 - 我们称这些列为 LEFT 和 RIGHT。

我为 LEFT 列设置了固定宽度，因为我需要一个固定宽度（大约 500 像素）。

我希望 RIGHT 列“向左浮动”并尽可能多地使用其外部容器的空间。我希望 RIGHT 块根据屏幕大小的变化做出响应。

两列都向左浮动。

如果我的 LEFT 列向左浮动并且宽度为 500 像素，并且 RIGHT 列向左浮动但没有宽度，则此方法效果很好。 RIGHT 的内容只是尽可能地延伸，漂浮在 LEFT 旁边。

当我将浏览器的宽度调整为较小的宽度时，RIGHT 块中的内容（例如，一长行文本）实际上应该向左浮动，并让任何文本换行到两行或多行。但是，文本不会换行，而是整个 RIGHT 列自然地落在 LEFT 列下方的底部，因为它的内容对于这个较小的屏幕尺寸来说太宽了。这是很自然的，我想我们都知道这个问题。在固定宽度的布局上，您也总是会为 RIGHT 列提供 WIDTH。但是，现在我试图在不指定宽度的情况下离开，但这似乎不正确，因为该列落到了底部。

例如：一些文字一些文字

请帮助/建议我解决上述问题。有没有解决方案？

【问题讨论】：

标签： gridview responsive-design

【解决方案1】：

您可以使用display:table 和display:table-cell 强制它们按照您想要的方式执行，然后在缩小移动设备尺寸时删除这些样式。这是我为有类似问题的人制作的 jsfiddle。

http://jsfiddle.net/hp8Vg/1/

【讨论】：

【解决方案2】：

像http://jsfiddle.net/TZrw7/ 这样的东西怎么样。将#right元素上的溢出设置为隐藏，就可以了。

#left
{
     width: 500px;
     float: left;
     border: 2px solid #f0f
}

#right
{
     overflow:hidden;
     border: 2px solid #00f
}

【讨论】：