响应式布局

Question

我目前正在创建部分响应式布局模板(用于平板电脑和台式机)。我在像素宽度和百分比上有问题。

我有两个主列-让我们称这两列为LEFT和RIGHT。

我为左边的列设置了固定宽度，因为我需要一个固定的宽度(大约500px)。

我希望右边的列“向左浮动”，并尽可能多地使用外部容器中的空间。我想要正确的块，以响应根据屏幕尺寸的变化。

两列都向左浮动。

如果我的左列向左浮动，宽度为: 500px，而右列向左浮动，但没有宽度，则效果很好。右侧的内容只是尽可能地伸展，漂浮在左侧。

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

例如:一些文本一些文本

请帮助/建议我解决上述问题。对此有什么解决方案吗？

Answer 1

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

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

Answer 2

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

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

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