html - 响应式设计中的对齐div

当浏览器缩小到480px时，我试图对齐div，

我有以下 html 代码，

<body>
<div id="container">
    <div id="leftcol"> left left left left left left left left left left left left left </div>
    <div id="rightcol"> right right right right right right right right right right right right </div>
    <div id="midcol"> mid mid mid mid mid mid mid mid mid mid mid mid mid mid mid  </div>
</div>
</body>

在 CSS 中，

/* CSS Document */

 *{
margin:0;
padding:0;
  }

  #container {
width: 100%;
height: 600px;
background-color:#FFFF00;
  }

  #leftcol {
float:left;
width:20%;
height: 600px;
background-color:#FF0000;
   }


  #rightcol {
float:right;
width:20%;
height: 600px;
background-color:#0099FF;
  }

  #midcol {
height: 600px;
background-color:#339900;
  }


  @media screen and (max-width:480px) {
#container {
width: 100%;
height: auto;
background-color:#FFFF00;
  }

  #leftcol {
width:100%;
height: auto;
background-color:#FF0000;
  }


  #rightcol {
width:100%;
height: auto;
background-color:#0099FF;
  }

  #midcol {
height: auto;
background-color:#339900;
  }
 }

![enter image description here][1]

http://jsfiddle.net/sztQR/

在图像中，我有左、右和中。我想要的是，中间左右

这可能吗？

最佳答案

怎么样this ？它使用绝对定位而不是 float ，但您无需任何 JavaScript 即可获得所需的效果...

更改 div 的顺序...

    <div id="midcol"> mid mid mid mid mid mid mid mid mid mid mid mid mid mid mid  </div>
    <div id="leftcol"> left left left left left left left left left left left left left </div>
    <div id="rightcol"> right right right right right right right right right right right right </div>

然后从 floats 更改为 position:absolute...当您达到 480px 时，再更改回 position:static。

*{
    margin:0;
    padding:0;
}

#container {
    height: 600px;
    background-color:#FFFF00;
    margin: 0 20%;
}

#leftcol {
    position:absolute;
    left:0;
    top:0;
    width:20%;
    height: 600px;
    background-color:#FF0000;
}


#rightcol {
    position:absolute;
    right:0;
    top:0;
    width:20%;
    height: 600px;
    background-color:#0099FF;
}

#midcol {
    height: 600px;
    background-color:#339900;
}


@media screen and (max-width:480px) {
    #container {
        width: 100%;
        height: auto;
        margin:0;
        background-color:#FFFF00; }
    #leftcol {
        position:static;
        width:100%;
        height: auto;
        background-color:#FF0000;}
    #rightcol {
        width:100%;
        height: auto;
        background-color:#0099FF;
        position:static; }
    #midcol {
        height: auto;
        background-color:#339900; }
}

关于html - 响应式设计中的对齐div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18472164/

html - 响应式设计中的对齐div

上一篇：javascript - 为什么每次删除并重新创建目标元素时动画速度都会增加？

下一篇：jquery - 如何使用jquery启用一个复选框的多个输入文本字段？