本文介绍了当我调整窗口大小时,div部分会移动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我并排放置了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

//editin 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部分会移动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 01:32