三个 div并排居中放置,自适应

三个div并排,并且随着浏览器大小自适应

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>


#wrapper {
  width:55%;
  clear:both;
  margin:0 auto;
  text-align:center;
  
}
#first {
  background-color:red;
  width:31%;
  float:left;
  margin-left: 10px;
}
#second {
  background-color:blue;
  width:32%;
  float:left;
  margin-left: 10px;
}
#third {
  background-color:#bada55;
  width:32%;
  float:left;
  margin-left: 10px;
}