将多个浮动div放在一起

Question

我应该让3 div坐在一起。所以我创建了一个div并且我已经放入了三个div，这个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%;这样的百分比。您还可以设置左右边距以区分margin: 0 20px;之类的div。

在这些情况下我通常做的是将我的元素包装在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/

Answer 2

如果你要将它们全部水平对齐，那么你应该使用一个无序列表来设置显示内嵌块zoom:1和display:inline。

没有理由使用浮子将它们并排放置。

Answer 3

这就是当我想要div彼此相邻时我使用的东西：

CSS：

#menuitem {
font-weight:bold;
border-right-style:solid;
font-size:10.7px;
border-right-width:1px;
border-left-width:1px;
height:30px;
position:relative;
}

#menuitem span {
position:absolute;
text-align: center;
}

#menubar {
margin-top:10px;
position:absolute;
left:0px;
font-family:Verdana, Geneva, sans-serif;
}

HTML：

<div id="menubar">
<div style="float:left;width:104px;border-left-style:solid;" id="menuitem"><span style="bottom:9px;width:104px;">Menu Item 1</span></div>
<div style="float:left;overflow:hidden;width:78px;" id="menuitem"><span style="bottom:7px;width:78px;">Menu Item 2</span></div>
<div style="float:left;overflow:hidden;width:100px;" id="menuitem"><span style="bottom:9px;width:100px;">Menu Item 3</span></div>
</div>

希望我帮助过。