当视口缩小时,具有百分比宽度的 Div 仍然换行
如果结果面板足够宽,则页面的行为符合我的要求导航位于左侧,内容位于右侧。当视口缩小时,我希望发生的事情是让内容在到达导航栏后缩小,而不是在其下方包裹。我一直在玩弄最小宽度,但似乎无法让它做我想做的事。
If the result panel is wide enough, the page behaves as I want with the nav on the left and content on the right. What I'd like to happen when the viewport shrinks is to have the content shrink once it hits the nav, rather than wrapping below it. I've been playing around with min-width and can't seem to get it to do what I want.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您已将内容宽度设置为 90%。如果视口太小,以至于
You have the content width set to 90%. If the viewport is so small that the
<nav>
box won't fit in the remaining 10% of the width then the content wraps below it. If you reduce the content width to 80% you will see that it behaves much better, but the proper way to write it is to reserve an absolute-width column for the<nav>
element on the left of the window.您可能想尝试 table-cell 属性(仅限 IE8 及更高版本),并为 IE7 及更低版本添加后备(例如,使用
nav
进行修复):演示
You might want to try the table-cell property (IE8 and up only), and add a fallback (eg. with fixed with for
nav
) for IE7 and below:demo
为什么不尝试玩一下这样的东西
http://jsfiddle.net/rExDY/27/
除非屏幕非常小,否则导航和内容不会重叠。如果导航达到一定宽度,您可以使用一些 CSS3 来移动导航。
Why not try playing around with something like this
http://jsfiddle.net/rExDY/27/
The nav and content will not overlap unless the screen is very small. You could use some CSS3 to shift the nav if it reaches a certain width.