css - 响应式网页设计 float 位置

Question

我试图在两列 float css 设计中实现以下目标

我的两个 css 是这样的:

.div1 {
 width: 25%;
 float:left;
}

.div2 {
 width: 75%;
 float: right;
}

.container {
 width:960px;
}

@media screen and (max-width: 320px) {
 .div1, .div2 {
 width: 100%;
 display: block;
 float: none;
 clear: both;
 }
 .container {
  width: 100%;
 }
}

我的 html 是这样的:

...
<div class="container">
 <div class="div1">
 ... content inside
 </div>
 <div class="div2">
  <img src="photo_loc"/>
 </div>
</div>

我有 Div I 和 Div II。 Div I 的宽度为 25%，Div II 的宽度为 75%。当我使用响应式设计达到 320 像素(iphone 纵向)时，Div II 低于 Div I，我认为这是正常过程。

我想做的是使用 float 将 Div II 置于 Div I 之上，这如何通过 css 实现？

Answer 1

Working Fiddle

.div1 {
width: 25%;
float:left;
background:orange;
}

.div2 {
width:75%;
float: right;
background:red;
}

@media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}