响应式布局

我目前正在创建部分响应式布局模板（用于平板电脑和桌面）。我在以像素和百分比表示宽度方面存在问题。响应式布局

我有2个主要列 - 让我们称这些列左和右。

我已经把LEFT列的固定宽度，因为我需要一个固定的宽度（约500px）。

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

两列均向左浮动。

如果我的LEFT列左移，并且宽度为500px，并且RIGHT列向左浮动但没有宽度，此方法运行良好。 RIGHT的内容尽可能简单地延伸，然后漂浮在LEFT旁边。

当我将浏览器调整为更小的宽度时，RIGHT块内的内容（例如一长串文本）应该实际上向左浮动，并让任何文本包装成两行或多行。但是，文本不会换行，而是整个RIGHT列自然落在LEFT列下方的底部，因为它的内容对于较小的屏幕尺寸而言太宽。这很自然，我想我们都知道这个问题。在一个固定宽度的布局中，你总是会给RIGHT列赋予一个WIDTH。但是，现在我试图脱离而没有指定宽度，但由于列落到底部，所以这看起来并不正确。

如：一些文字一些文字

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

来源

2013-05-31 thushanth

这样的事情怎么样http://jsfiddle.net/TZrw7/。将#right元素的溢出设置为隐藏状态，即可。

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

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

来源

2013-05-31 13:57:48 ezekielDFM

您可以使用display:table和display:table-cell迫使他们执行您想要的方式，然后定型下来移动时删除这些样式。这是我为有类似问题的人制作的jsfiddle。

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

来源

2013-05-31 16:12:47

回答

相关问题