1

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

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

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

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

两列都向左浮动。

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

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

例如：一些文本一些文本

请帮助/建议我解决上述问题。是否存在任何解决方案？

4

2 回答 2

4

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

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

于 2013-05-31T16:12:47.483 回答
1

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

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

#right
{
     overflow:hidden;
     border: 2px solid #00f
}
于 2013-05-31T13:57:48.380 回答