当我调整窗口大小时，div部分会移动 [英] Div sections shifts when i resize the window

问题描述

我并排放置了2个div，其中一个包含徽标，另一个包含文本字段。当我以更大的分辨率查看此页面时，一切正常。但是，当我调整窗口的大小，在第二个div也被shited，并配备了1格下面。

I have placed 2 divs side by side, one conatins the logo and second contains the text fields. When I view this page at larger resolution, everything is ok. But, when I resize the window, the second div also gets shited and comes below the 1st div.

但我希望他们留在一边有一边，在任何分辨率。请提供该代码溶液。

But I want them to stay there side by side, at any resolution. kindly provide the code solution for this.

推荐答案

我想你使用float将它们彼此相邻地定位。
你可以用另一个div来包装你想要查看的页面的最小宽度。
可以阻止第二个下降到第一个以下。

I guess you use float to position them next to each other. You can wrap around the two divs with another div of a minimum width you want the page to be viewed in. that will stop the second one from dropping below the first one

<div id="wrapper">
    <div id="logo">...</div>
    <div id="text">...</div>
</div>

风格为：

style for it would be:

#wrapper { width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { width: 780px; }

就像那样。
如果有人改变窗口大小要窄于980px（或者采用较低的屏幕解析度），那么你会得到横向滚动。

something like that. if someone resizes the window to be narrower than 980px (or uses lower screen res) then you'll get horizontal scroll.

//编辑
在回复评论时可以使用最小宽度使其更加灵活。会导致IE

//edit in response to comment you can use min-width to make it more flexible. will cause IE

#wrapper { min-width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { min-width: 780px; }

$ b 最小宽度不受IE6支持，因此您可能需要修复。

min-width isn't supported by IE6 so you may need fix for that.

这篇关于当我调整窗口大小时，div部分会移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！