个人中心
gpt4 book ai didi

javascript - 响应式设计 : switching order of Div's

转载 作者：太空宇宙 更新时间：2023-11-04 02:54:26 26 4
gpt4 key购买 nike

我有一个简单的页面。我想要做的是当我缩小宽度时，我希望“中间”div 位于“左”div 之上。现在，中间的 div 应该是第二个，但我想知道我将如何做到这一点，以便中间的 div 位于左边的 div 之上。

http://jsfiddle.net/nynou9mr/ 

div{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:60px;
}

body{
	margin:0;padding:0;
}

#header{
	height:100px;
	width:100%;
	background:purple;
	text-align:center;
	position:relative;
}

.wrap{
	width:100%;
	text-align:center;
	background:blue;
    overflow:hidden;
    white-space:nowrap;
}


#left{
	display: inline-block;
    margin-top:10px;  
	height:500px;
	width:300px;
	background:red;
}

#middle{
	display: inline-block;
	margin-top:10px;   
	margin-left:10px;
	height:500px;
	width:1570px;
	background:gray;
}


@media (max-width:1320px){
	#left{
		width:800px;
		height:200px;
		margin:20px auto;display:block;
	}
	#middle{
		width:800px;
	}
	#bottom{
		margin-top:100px;
	}
}

@media (max-width:1625px){
    #right{
	  width:100%;
	  height:300px;
    }

}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
	padding: 0;
}
html, body {
	height: 100%;
	padding:0;
}

.forfooter{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
}

#bottom{
	/*position:absolute;
	bottom:0;
	width:100%;*/
	height:100px;
	background:orange;
}

.push{
	height:0px;
	margin-top:-100px;
}
<title>First Responsiveness</title>
</head>
<body>

	<div class="forfooter">
		<div id="header">Header</div>
		
        <div class="wrap">
			<div id="left">left</div>
			<div id="middle">Middle</div>
        </div>
        
		<div class="push"></div>
    </div>

		<div class="push"></div>
		<div id="bottom">Bottom</div>

最佳答案

取决于您需要的浏览器支持。

flexbox 让这变得简单。

.wrap {
  width: 80%;
  margin: 10px auto;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  padding: 25px;
}
#left,
#middle {
  height: 50px;
  line-height: 50px;
  text-align: center;
  order: 1;
}
#left {
  background: #bada55;
}
#middle {
  background: #663399;
  color: white;
}
@media screen and (max-width: 760px) {
  #middle {
    order: 0;
  }
}
<div class="wrap">

  <div id="left">left</div>

  <div id="middle">Middle</div>
  
</div>

Codepen Demo

关于javascript - 响应式设计 : switching order of Div's，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32418037/

26 4 0
文章推荐： javascript - Express/React promise 陷入停滞
文章推荐： c++ - pcap_next_ex() 如果到达 pcap 文件的末尾则不能再次使用
文章推荐： node.js - Mongoose 查找并替换文档中的特定短语
文章推荐： c - 两个字符数组之间分配中的不兼容类型
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com