浏览器调整大小时 DIV 换行
所以基本上我正在设计的网站在一个容器 div 中有 3 个 div。一个向左浮动。右边两个，一个在上面，一个在下面。当浏览器最大化时它们工作正常。问题是，当调整浏览器大小时，即使我设置了最小宽度，右侧 div 也会包裹在左侧 div 下方。我希望 div 保留在原来的位置，并显示滚动条。我确实尝试过溢出，但没有运气。有什么解决办法吗？
PS-最初我也为内部 div 添加了 min-width 。他们似乎没有解决问题，所以我删除了它们。 如果能找到解决方案或推动正确的方向，我们将不胜感激。
这是 jsFiddle 的链接 - http://jsfiddle.net/R62w4/3/
谢谢，马修.虽然这解决了换行问题，但我的网站现在在右侧有一条细线的像素。知道如何删除它吗？它从页眉一直持续到页脚。它不受与页眉、导航栏或页脚相关的 CSS 元素的任何更改的影响。
好吧，我找到了右侧多余空间的原因。如果我增加外部 div 的边距，空间就会增加。有没有办法在不获得空间的情况下增加边距？
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您也许可以将它们包装在以下内容中：
...以防止这种情况发生。
很难确切知道问题出在哪里，您可以发布一些代码或制作一个 JSFiddle 吗？
更新：
我认为问题在于您使用基于 % 的宽度和 px 作为边距 - 很容易忘记您拥有多少可用空间，随后您的布局就会崩溃。考虑两个宽度为 50%、边距为 1px 的左浮动 DIV 每次都会分成两行，因为这超过了 100%。
我稍微改变了你的小提琴： http://jsfiddle.net/R62w4/5/
...只需将第一个 DIV 的左边距和其他两个 DIV 的右边距移动到父容器似乎就可以为所有内容提供足够的空间。
PS：您可以使用基于百分比的边距，并确保您想要在一行上显示的所有内容都保持 <= 100%。
You might be able to wrap them in this:
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
simpl css 框架 向您展示了如何使用基于像素的边距来执行基于百分比的列，这就是您想要的。
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.