请实现纯CSS实现如下图所示的弹性布局效果，也就是随着设备的宽度不断变化，...

Question

请实现纯CSS实现如下图所示的弹性布局效果，也就是随着设备的宽度不断变化，布局需要符合下图所示的效果，无需考虑兼容性问题，无需关注样式细节，主要考验大家的布局功力。

再使用文字描述下布局：

手写HTML结构和CSS代码，注意是一套HTML和CSS完成上述的各种宽度下的弹性布局效果，不用考虑浏览器的兼容性、

描述：

整个网站是最大宽度980px的布局效果，因此，在页面的尺寸足够的时候，导航和搜索在一个980px的范围内两端对齐，整体居中显示。然后用户信息页面右对齐（见上图①和②）。

但是，不同用户的浏览器宽度是不一样的，如果用户宽度不是很宽，例如是1200px，笔记本常见的宽度，那么上面这种布局就会有问题，右侧的用户信息就会和搜索框重叠，布局就会出问题。

所以希望，当用户信息和搜索框靠的足够近的时候，整体的980px宽度自动减小，同时左侧至少保留190px的距离（见上图③和④）。

提示：

本题布局有一定难度，但是实际上代码量很少，需要大家对CSS弹性布局有比较深入的了解。