将多个浮动div放在一起

Question

我应该让3 div秒坐在一起.所以我做了一个div,我已经把三个divs,这个css样式:

div.holder div {
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */
}

和html这样:

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

它应该看起来像这样: 相反,它看起来像这样:

边框div应与灰线的末端对齐.

Answer 1

您正在为宽度指定像素值.无论你使用浮点数做什么,这些像素值都是固定的,永远不会到达边界的末尾.您可以做的是将宽度设置为百分比width: 33%;.你也可以设置你的左右边距来区分你的div margin: 0 20px;.

我在这些情况下通常做的是将我的元素包装在div中并使用该div来定位元素.然后,内部容器我将用于背景颜色,文本颜色等.这样的东西可能适合你:

<div class="holder">
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
</div>

而CSS:

.wrapper {
    float:left;
    width:33%;
}
.container {
    background-color: yellow;
    margin: 10px;
    padding: 20px;
}

这是一个小提琴:http://jsfiddle.net/bWFS8/