考虑我们有 3 个 float 的 div 并且它们彼此相邻
我们能否在较小的设备中将左右 div 并排放置，中间的 div 在它们上方，如下图所示？
我在下面尝试过但没有成功。 任何想法？谢谢。
<html>
<head>
<style>
#content {
width: 20%;
float: left;
background:purple;
}
#middle {
width: 64.3%; /* Account for margins + border values */
float: left;
margin-right:2px;
margin-left:2px;
background:yellow;
}
#sidebar {
width: 15%;
float: left;
background:red;
}
/* for 980px or less */
@media screen and (max-width: 980px) {
#content {
width: 20%;
float: left;
background:purple;
}
#middle {
float:none;
clear:both;
}
#sidebar {
width: 15%;
float: left;
background:red;
}
}
</style>
</head>
</head>
<body>
<div id="content">1</div>
<div id="middle">2</div>
<div id="sidebar">3</div>
</body>
</html>
最佳答案
做到这一点的最佳方式是首先考虑移动设备。在小型设备上按正确的顺序放置 div，在大型设备上使用 css position, left 和 right 来获得正确的顺序。
http://codepen.io/mouhammed/pen/Ieyom
HTML:
<html>
<head>
</head>
</head>
<body>
<div id="middle">2</div>
<div id="content">1</div>
<div id="sidebar">3</div>
</body>
</html>
CSS:
#content {
width: 20%;
float: left;
background:purple;
position:relative; /*pull this div to the right */
right:64.3%;
left:auto;
}
#middle {
width: 64.3%; /* Account for margins + border values */
float: left;
margin-right:2px;
margin-left:2px;
background:yellow;
position:relative; /*push this div to the left */
left:20%;
right:auto;
}
#sidebar {
width: 15%;
float: left;
background:red;
}
/* for 980px or less */
@media screen and (max-width: 980px) {
#content {
width: 70%;
background:purple;
right:auto;
}
#middle {
width:100%;
float:left;
left:auto;
}
#sidebar {
width: 30%;
float: left;
background:red;
}
}
关于html - 在较小的设备中按所需顺序放置 float div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25093556/