Question

考虑我们有3个浮动的div并且它们彼此相邻

我们可以将左右div放在彼此旁边，将中间div放在较小的设备上，如下图所示吗？

enter image description here

我试过以下但没有成功。任何的想法？感谢。

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

Answer 1

使用浮动div时，只能使用CSS来实现您要求的布局。这是因为浮动的div是源序。虽然可以有几种不同的方法。

您可以使用jquery来操纵位置。但这是不可取的。
使用flexbox。 Flex盒具有不错的浏览器支持（IE 10 +）

Answer 2

最好的方法是首先考虑移动。将div设置为小型设备的正确顺序，并使用左右css位置在大型设备上获得正确的顺序。

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

Answer 3

以下是一个让您入门的选项：http://codepen.io/panchroma/pen/KjmBH

<强> HTML

<body>
  <div class="wrap"> <!-- wrap everything in a positioned div so that we can use position: absolute with the children divs -->
    <div id="middle">2</div>
    <div id="content">1</div>
    <div id="sidebar">3</div>
  </div>
 </body>

CSS

.wrap{
  position:relative;
}
#content {
  width: 20%; 
  background:purple; 
  position:absolute;
  top:0;
  left:0;
}    
#middle {
  width: 64.3%;
  margin-left:20%;
  background:yellow;
}    
#sidebar {
  width: 15.7%;     
  background:red;
  position:absolute;
  top:0;
  right:0;
}    
/* for 980px or less */
@media screen and (max-width: 980px) { 
  #content {
  width: 60%;
  float: left;
  background:purple; 
  position:static;
  }    
  #middle {
  width:100%; 
  margin-left:0;
  position:static;
  }    
  #sidebar {
  width: 40%;     
  background:red;
  position:static;  
  float:right;
  }
}

祝你好运！

在较小的设备中按需要放置浮动的div？

3 个答案: