2

我试图在浏览器缩小到 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/

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

这可能吗？

4

1 回答 1

3

这个怎么样？它使用绝对定位而不是浮动，但是您无需任何 javascript 即可获得所需的效果...

改变你的顺序div's...

    <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...更改回position:static当您达到 480 像素时。

*{
    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; }
}
于 2013-08-27T18:04:50.210 回答