根据宽度更改divs的顺序 [英] Changing divs order based on width

问题描述

 < div id =left >< h1> title left< / h1>< / div> 
< div id =right>< h1> title right< / h1>< / div> 
< div id =center>< img src =img / titleimage.jpgalt =/>< / div> 
  

与css一致：

  #left {
 width：250px; 
 float：left; 
 margin：200px auto; 
职位：亲属; 
} 
 
 #right {
 width：250px; 
 float：right; 
职位：亲属; 
 margin：200px auto; 
} 
 
 #center {
 margin：60px auto; 
 margin-bottom：0; 
 width：500px; 
职位：亲属; 
 float：left; 
} 
  

当浏览器窗口变小时，我想让div重新排序。我希望他们像这样从上到下显示：

LEFT

RIGHT

CENTER

甚至更好

中心

左边

右边

有什么想法？

解决方案

将中心div移动到顶部

 < div id =center>< img src =img / titleimage.jpgalt =/> < / DIV> 
< div id =left>< h1> title left< / h1>< / div> 
< div id =right>< h1> title right< / h1>< / div> 
  

I've got 3 divs in a wrapper side by side, using:

    <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>

aligned like this with 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;
}

I would like for the divs to reorder when the browser window becomes smaller. I would like them to appear top to bottom like this :

LEFT
RIGHT
CENTER

or even better

CENTER
LEFT
RIGHT

Any ideas?

解决方案

Move the center div all the way to the top

<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>

这篇关于根据宽度更改divs的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！