css - 根据宽度更改 div 顺序

标签 css html css-float

<分区>

我在包装器中并排放置了 3 个 div,使用:

    <div id="left"><h1>title left</h1></div>
    <div id="right"><h1>title right</h1></div>
    <div id="center"><img src="img/titleimage.jpg"  alt=""/></div>

像这样与 css 对齐:

#left{
width:250px;
float:left;
margin:200px auto;
position:relative;
}

#right{
width:250px;
float:right;
position:relative;
margin:200px auto;
}

#center{
margin:60px auto;
margin-bottom:0;
width:500px;
position:relative;
float:left;
}

当浏览器窗口变小时,我希望 div 重新排序。我希望它们像这样从上到下显示:



中心

甚至更好

中心

有什么想法吗?

最佳答案

将中心 div 一直移动到顶部

<div id="center"><img src="img/titleimage.jpg"  alt=""/></div>
<div id="left"><h1>title left</h1></div>
<div id="right"><h1>title right</h1></div>

关于css - 根据宽度更改 div 顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22159235/

上一篇:javascript - 如何动态扩展 div 的宽度以适合一个非常长的单词?

下一篇:html - 菜单项不会在彼此下方排列

相关文章:

html - 固定div背景

html - float 元素会忽略填充吗?

html - 将 CSS 链接到 HTML 背景颜色

javascript - 如何将在 div 元素中工作的工具提示添加到我表中的 li 元素?

Jquery Toggle 丢弃 CSS

css - 我将如何在偏移 div 的中心叠加图像?

css - 表内容溢出包含 DIV

Jquery 在具有相同类的其他 div 中选择被点击的 div

css - css过滤器是否有可动画的过渡属性?

css - 需要使用 CSS 属性创建弹出窗口