在调整大小css上更改div位置

页面上有两个彼此相邻的div。现在，当我调整浏览器的大小时，其中一个div与另一个重叠。我想要的是当没有足够的空间来显示两个div时，将其中一个div下移（在另一个div下面）。可以用css来实现吗？怎么样？在调整大小css上更改div位置

身体：

<div id="container"> 
    <h1 align="center">Title</h1> 

    <div id="image1"> 
     <img src="back1.png" alt="a" /> 
    </div> 

    <div id="image2"> 
     <img src="back2.png" alt="b" /> 
    </div> 
</div>

的CSS

#container {position: relative; height:800px; width: 720px; background: #f0f0f0;}   
#container #image1 {position: absolute; top: 10%; left: 0;} 
#container #image2 {position: absolute; top:0; right:0;}

来源

2012-08-04 Neeraj Kumar

你可以请张贴你的CSS这两个div吗？否则很难提供帮助。 – 2012-08-04 05:55:49

取决于你如何定位它们。也许'float：left;'或'display：inline-block;'会有帮助吗？ – Chad 2012-08-04 05:57:10

你可以发布你的代码，如[jsfiddle]（http://jsfiddle.net） – TMB 2012-08-04 05:59:31

虽然还没有发布你的代码，我猜您使用相对或绝对定位的定位他们样式div的，这使它们重叠。我会使用display:inline-block;以您想要的方式制作相邻的div。

Click here举例说明我的意思。尝试调整浏览器的大小以查看它的工作原理。

Is this example更多你的意思是？我只是用花车。

来源

2012-08-04 06:05:51

工作正常。谢谢。但是我可以使用'display：inline-block;'如果其中一个div是class而不是id？（我的意思是一个是''div class =“image1”>'和其他是''div id =“image2”>'） – 2012-08-04 06:26:53

当然，只需使用.image1 {display：inline-block; } – 2012-08-04 15:59:36

如果div具有'position：absolute'属性，则这不起作用。我需要使用'position：absolute'属性。那么我需要一些JavaScript来完成任务吗？ – 2012-08-05 05:35:25

在调整大小css上更改div位置

回答

相关问题