使 4 框响应

Question

html

<footer>
<div class="Footer_Container">
    <div class="Footer_Rows">
        <div class="span3" id="sspan1">
            <h5>CONTACT</h5>
            <ul>
                <li><a href="mailto:chris.pagemotion@gmail.com" target="_blank">chris@pagemotion.com</a></li>
                <li><a href="tel:03 013 3134114" traget="_blank">(03) 013 3134114</a></li>
            </ul>
        </div><!--end of span-->

        <div class="span3" id="sspan2">
            <h5>FOLLOW</h5>
            <ul>
                <li><a href="http://www.facebook.com"   target="_blank">Facebook</a></li>
                <li><a href="http://twitter.com" traget="_blank">Twitter</a></li>
            </ul>
        </div><!--end of span-->

        <div class="span3" id="sspan3">
            <h5>VISIT</h5>
            <ul>
                <li><a href="googlemap" target="_blank">6700 N New York Ave Suite 233 Portland, OR 97203</a></li>
            </ul>
        </div><!--end of span-->

            <div class="span3" id="sspan4">
                <img src="Image/mylogo.png" class="mylogo">
                <!-- <img src="Image/rdio-icon.png" class="sg"> -->
        </div><!--end of span-->


    </div><!--end of FooterRows-->
</div><!--end of FooterContainer-->

css

    footer{
    width:100%;
    height:100%;
    min-height:150px;
    padding:30px 0 80px;
    color:#fff;
    font-size:14px;
    line-height:1.6;
    background:#222;
    position:relative;
}

.Footer_Container{
    max-width:1080px;
    width:86%;
    min-height:150px;
    padding-right:10px;
    padding-left:10px;
    margin:0px auto;
    /*box-sizing:border-box;*/
    display:block;
    background-color:red;
}

.Footer_Rows{
    margin-right:-10px;
    margin-left:-10px;
    padding:25px;
    overflow:auto;
    /*margin:0px auto;*/
}

.span3{
    width:16%;
    position:relative;
    padding-right:30px;
    padding-left:30px;
    min-height:1px;
    float:left;
    font-size:14px;
    color:#fff;
    font-family:"colfax-web";
    background-color:blue;

}

.span3 h5{
    margin:0 0 10px;
    font-size:16px;
    font-style:normal;
}

.span3 ul{
    margin:0;
    padding:0;
    list-style:none;
}

.span3 ul li{
    display:list-item;
    /*text-align:-webkit-match-parent;*/
    box-sizing:border-box;
}

.span3 ul li a{
    font-size:14px;
    font-family:"colfax-web";
    color:#fff;
    text-decoration:none;
    -webkit-trasition:all .2s ease-in-out;
    transition:all .s2 ease-in-out;
}

#sspan1{
    margin-left:10px;
}


#sspan4{
    margin-left:10px;
}

.mylogo{
    width:150px;
    height:100px;
}

please copy and paste i cant put link here , i want to make this responsive , which will be 2 box on top , 2 box on bottom . but i have no idea how to make it can any one show me how ?

so is like this:

A B
C D

thank ~

Answer 1

Are you looking for something like this?

http://jsfiddle.net/62uzV/

.span3{
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

footer {
      width:100%;
      height:100%;
      min-height:150px;
      padding:30px 0 80px;
      color:#fff;
      font-size:14px;
      line-height:1.6;
      background:#222;
      position:relative;
  }
  .Footer_Container {
      max-width:1080px;
      width:86%;
      min-height:150px;
      padding-right:10px;
      padding-left:10px;
      margin:0px auto;
      /*box-sizing:border-box;*/
      display:block;
      background-color:red;
  }
  .Footer_Rows {
      margin-right:-10px;
      margin-left:-10px;
      padding:25px;
      overflow:auto;
      /*margin:0px auto;*/
  }

  .span3 {
      width:50%;
      padding-right:30px;
      padding-left:30px;
      min-height:1px;
      float:left;
      font-size:14px;
      color:#fff;
      font-family:"colfax-web";
      background-color:blue;
  }
  .span3 h5 {
      margin:0 0 10px;
      font-size:16px;
      font-style:normal;
  }
  .span3 ul {
      margin:0;
      padding:0;
      list-style:none;
  }
  .span3 ul li {
      display:list-item;
      /*text-align:-webkit-match-parent;*/
      box-sizing:border-box;
  }
  .span3 ul li a {
      font-size:14px;
      font-family:"colfax-web";
      color:#fff;
      text-decoration:none;
      -webkit-trasition:all .2s ease-in-out;
      transition:all .s2 ease-in-out;
  }
  .mylogo {
      width:150px;
      height:100px;
  }