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

标签 css html

页面上有两个相邻的div。现在,当我调整浏览器大小时,其中一个 div 与另一个重叠。我想要的是在没有足够的空间显示两者时将其中一个 div 向下移动(在另一个 div 下方)。可以用css实现吗?如何?

正文:

<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;}​

最佳答案

虽然您还没有发布您的代码,但我猜您是通过使用相对或绝对定位来设置 div 的样式,这会使它们重叠。我会改为使用 display:inline-block; 以您想要的方式制作相邻的 div。

Click here举个例子说明我的意思。尝试调整浏览器的大小以查看它是否有效。

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

关于css - 在调整大小 css 上更改 div 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11806205/

相关文章:

html - Firefox contentEditable div 焦点问题

css - 如何覆盖填充 : 0; from sass?

html - 应用媒体查询时,汉堡包菜单和导航链接未正确对齐

javascript - CSS 过渡不会在卸载前触发

html - 将文本环绕在圆形 div 周围

css - 如何在不单击激活它的链接的情况下始终显示纯 HTML5/CSS 模式窗口?

html - 如何更正药丸中的重叠文本

javascript - Karma 启动器 HTML5 API

javascript - 在 PHP 中向随机用户显示 html 内容

html - 选择无法选中且不高亮的控件