Question

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

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

这可能吗？

Answer 1

this怎么样？它使用绝对定位而不是浮点数，但是你可以在没有任何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 ...当您达到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; }
}

在响应式设计中对齐div

1 个答案: