设计流体宽度页面

Question

我正在构建一个内部Web应用程序，我想要使用整个页面，因此选择了灵活的宽度设计。我一直遇到的问题是内联块导致在较低屏幕分辨率下将事物包裹到下一行。

我做错了什么或者我应该忽略内联块并浮动我的元素？作为参考，我不必担心浏览器，因为我知道所有用户都将使用最新的Chrome

修改 http://jsfiddle.net/nH4GY/

这在1900x1080时工作正常但是当你降低分辨率时，一切都开始包裹到下一行。

Answer 1

对于此类功能，您可以使用display:table-cell;

body{
    display:table;
}
.pair
{
    width: 31%;
    padding: 1%;
    display:table-cell;
} 

选中此http://jsfiddle.net/sandeep/nH4GY/6/

对于像chrome这样的基于webkit的浏览器，您可以使用Flexible Box Model css。

选中此http://jsfiddle.net/sandeep/GYrr7/

Answer 2

你可以尝试增加2 div之间的差距，或者你可以设置主容器的最小宽度，这样它就不会小于某个宽度

Answer 3

如果你有你提供的例子的页面布局，你可以使用float：left表示子div元素和容器。

如果你然后给你的容器，比如100％的宽度，你的孩子div会尝试尊重那个宽度并且在更高分辨率的屏幕上并排出现并且只会在较低分辨率的屏幕上进行包装。

如果你愿意，你甚至可以阻止包装发生，只需为具有一些固定值（比如说100px）的div指定一个“min-width”属性。

希望有所帮助。谢谢。