Question

我有一个简单的页面。我想要做的是当我将宽度设置得更小时，我想要的是＆＃34;中间＆＃34; div位于＆＃34; left＆＃34; DIV。现在，中间div应该是第二个，但是我想知道如何制作它以便中间div位于左边div的顶部。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

.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; } }让这很容易。

＆＃13;

<div class="wrap">

  <div id="left">left</div>

  <div id="middle">Middle</div>
  
</div>

＆＃13;

var demo = (DemoClass)System.Runtime.Serialization
                      .FormatterServices.GetSafeUninitializedObject(typeof(DemoClass));
Console.WriteLine("PROP=" + demo.Prop);

＆＃13;

Codepen Demo

Answer 2

检查一下：http://jsfiddle.net/e42q63w5/1/ 诀窍是在你的html div#middle之前div#left并使用float: left | right控制位置

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{
	float: left
	display: inline-block;
    margin-top:10px;  
	height:500px;
	width:20%;
	background:red;
}

#middle{
	float: right;
	display: inline-block;
	margin-top:10px;   
	margin-left:10px;

	height:500px;
	width:75%;
	background:gray;
}

@media (max-width:1320px){
	#left{
	    float: none;
		width:800px;
		height:200px;
		margin:20px auto;
        display:block;
	}
	 #middle{
	    float: none;	     
		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;
}

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

响应式设计：Div的切换顺序

2 个答案: