将多个浮动div放在一起

时间:2013-08-27 22:42:12

标签: css html css-float centering

我应该让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>

它应该是这样的: three divs 相反,它看起来像这样: three divs

边框div应与灰线的末尾对齐。

3 个答案:

答案 0 :(得分:5)

您正在为宽度指定像素值。无论你使用浮点数做什么,这些像素值都是固定的,永远不会到达边界的末尾。你可以做的是将宽度设置为像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/

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

这就是当我想要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>

希望我帮助过。